fullcalendar日历控件中文显示设置fullcalendar变成中文

fullcalendar日历显示中文此方法不需要zh-cn.js，直接在.fullCalendar里面配置以下代码即可，header之前的就够。

$('#calendar').fullCalendar({
buttonText: {
        today: '今天',
        month: '月视图',
        week: '周视图',
        day: '日视图'
    },
    allDayText: "全天",
    timeFormat: {
        '': 'H:mm{-H:mm}'
    },
    weekMode: "variable",
    columnFormat: {
        month: 'dddd',
        week: 'dddd M-d',
        day: 'dddd M-d'
    },
    titleFormat: {
        month: 'yyyy年 MMMM月',
        week: "[yyyy年] MMMM月d日 { '—' [yyyy年] MMMM月d日}",
        day: 'yyyy年 MMMM月d日 dddd'
    },
    monthNames: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
    dayNames: ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
     header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    eventClick: function (date, allDay, jsEvent, view) {
        //...
    },
    events: function (start, end, callback) {
        //...
    }});

效果图如下：

(ps：如果有fullcalendar/zh-cn.js的资源的话直接引入并配置locale:"zh-cn"即可)

注：以上方法需要引入原生的fullcalendar.min.js后另外加入

2021年6月22日 （以上方法如果报错尝试以下方法）
---------------------------分割线-----------------
本例添加在jsp页面，html页面未尝试

<!-- 这个是为了让日期开始时间小于结束时间-->
<script type="text/javascript">



    jQuery(function($) {
        /* initialize the external events
            -----------------------------------------------------------------*/
        $('#external-events div.external-event').each(function() {

            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
            // it doesn't need to have a start or end
            var eventObject = {
                title: $.trim($(this).text()) // use the element's text as the event title
            };

            // store the Event Object in the DOM element so we can get to it later
            $(this).data('eventObject', eventObject);

            // make the event draggable using jQuery UI
            $(this).draggable({
                zIndex: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            });

        });

        /* initialize the calendar
        -----------------------------------------------------------------*/

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        var initialLocaleCode = 'zh-cn';


        var calendar = $('#calendar').fullCalendar({


            buttonText: {
                today: '今天',
                month: '月视图',
                week: '周视图',
                day: '日视图',
                prev: '<i class="icon-chevron-left">后退</i>',
                next: '<i class="icon-chevron-right">前进</i>'
            },
            allDayText: "全天",
            timeFormat: {
                '': 'H:mm{-H:mm}'
            },
            weekMode: "variable",
            columnFormat: {
                month: 'dddd',
                week: 'dddd M-d',
                day: 'dddd M-d'
            },
            titleFormat: {
                month: 'yyyy年 MMMM月',
                week: "[yyyy年] MMMM月d日 { '&#8212;' [yyyy年] MMMM月d日}",
                day: 'yyyy年 MMMM月d日 dddd'
            },
            monthNames: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
            dayNames: ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],


            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            navLinks: true, // can click day/week names to navigate views
            locale:'zh-cn',

            events:
        [
            <c:forEach items="${calendars}" var="e" varStatus="s">
                {
                    title: "${e.title}",
                    start: new Date(${e.start.year}+1900, ${e.start.month}, ${e.start.date},${e.start.hours}, ${e.start.minutes}),
                    end: new Date(${e.end.year}+1900, ${e.end.month}, ${e.end.date}, ${e.end.hours}, ${e.end.minutes}),
                    allDay: false,
                    className: 'label-${e.classname}'
                },
                </c:forEach>
            ],


            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar !!!
            drop: function(date, allDay) { // this function is called when something is dropped

                // retrieve the dropped element's stored Event Object
                var originalEventObject = $(this).data('eventObject');
                var $extraEventClass = $(this).attr('data-class');


                // we need to copy it, so that multiple events don't have a reference to the same object
                var copiedEventObject = $.extend({}, originalEventObject);

                // assign it the date that was reported
                copiedEventObject.start = date;
                copiedEventObject.allDay = allDay;
                if($extraEventClass) copiedEventObject['className'] = [$extraEventClass];

                // render the event on the calendar
                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();
                }
            }
            ,
            selectable: true,
            selectHelper: true,

            select: function(start, end, allDay) {
                bootbox.prompt("添加新事件：", function(title) {
                    if (title !== null) {
                        calendar.fullCalendar('renderEvent',
                            {
                                title: title,
                                start: start,
                                end: end

                                // allDay: allDay
                            },
                            true // make the event "stick"
                        );


                    }

                });


                calendar.fullCalendar('unselect');

            }
            ,

            eventClick: function(calEvent, jsEvent, view) {

                var form = $("<form class='form-inline' id='form1' action='../calendar/del ' method='post'><label>修改事件名称 &nbsp;</label></form>");
                form.append("<input class='middle'   type=text value='" + calEvent.title+"' /> ");
                form.append("<input class='hidden' name='cid' value='12'>");
                form.append("<button type='submit' id='su1' class='btn btn-sm btn-success'><i class='icon-ok'></i> 修改</button>");

                var div = bootbox.dialog({
                    message: form,
                    buttons: {
                        "delete" : {
                            "label" : "<i class='icon-trash'></i> 删除事件",
                            "className" : "btn-sm btn-danger",
                            "callback": function() {

                                calendar.fullCalendar('removeEvents' , function(ev){

                                    return (ev._id == calEvent._id);


                                })
                            }

                        } ,
                        "close" : {
                            "label" : "<i class='icon-remove'></i> 关闭",
                            "classname" : "btn-sm"
                        }
                    }

                });


                form.on('submit', function(){

                    calEvent.title = form.find("input[type=text]").val();
                    calendar.fullCalendar('updateEvent', calEvent);
                    $("#form1").submit();
                    div.modal("hide");

                    return false;
                });


                console.log(calEvent.id);
                //console.log(jsEvent);
                //console.log(view);

                // change the border color just for fun
                //$(this).css('border-color', 'red');

            }

        });


    });


</script>