fullcalendar 日历插件3.9.0遇到的坑

最新推荐文章于 2024-07-25 08:00:00 发布

SuperCookies

最新推荐文章于 2024-07-25 08:00:00 发布

阅读量5.1k

点赞数 2

分类专栏： J-S 插件

本文链接：https://blog.csdn.net/SuperCookies/article/details/81945273

版权

J-S 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

插件

7 篇文章 0 订阅

订阅专栏

fullcalendar 日历插件3.9.0 遇到的坑

坑1：如果你用的是高版本的jquery插件而用的低版本的fullcalendar插件的话，会导致生成的日历插件页面显示有问题，时间点对不上等问题，这时你需要升级对应版本的fullcalendar插件；
坑2：多语言问题：
解决方法：看引入locale-all.js和moment.min.js文件，并且三个js文件的引入顺序为：moment.min.js > fullcalendar-3.9.0.js > locale-all.js;初始化时加入locale 属性，详细见下面的代码块
坑3：使用viewRender方法：当新的日期区间渲染后或者视图切换后触发，如果想通过改变其他条件也要重新渲染日历，即触发这个方法
解决办法：
var view = calendar.fullCalendar(‘getView’);//获取当前日历
view.triggerViewRender();//重新触发viewRender方法
代码片段

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <link  type="text/css"  rel="stylesheet" href="https://cdn.bootcss.com/fullcalendar/3.8.2/fullcalendar.min.css">
</head>
<body>
<div id="calendar"></div>
//引入的js文件
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="./fullcalendar/moment.min.js"</script>
<script src="./fullcalendar/jquery-ui.min.js"></script>
<script src="./fullcalendar/fullcalendar-3.9.0.js"></script>
<script src="https://cdn.bootcss.com/fullcalendar/3.9.0/gcal.js"></script>
<script src="./fullcalendar/locale-all.js"></script>
<script>
    var calendar;
    (function ($) {
    var language = getCookie("userLanguage");
    calendar = $('#calendar').fullCalendar({
        firstDay: 0,//设置一周中显示的第一天是哪天，周日是0，周一是1
        buttonText: {//设置日历头部各按钮的显示文本信息
             today:    '今天/本周',
             month:    '月',
             week:     '周',
             day:      '日'
        },
        allDayText:'全天',
        locale : language,//多语言
        height: 600,
        header: {//设置日历头部信息。
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: false,//不能进行编辑
        droppable: false, 
        drop: function(date, allDay) { // this function is called when something is dropped
            var originalEventObject = $(this).data('eventObject');
            var $extraEventClass = $(this).attr('data-class');
            var copiedEventObject = $.extend({}, originalEventObject);
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;
            if($extraEventClass) copiedEventObject['className'] = [$extraEventClass];
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
            if ($('#drop-remove').is(':checked')) {
                $(this).remove();
            }

        },
        selectable: true,//是否允许用户通过单击或拖动选择日历中的对象，包括天和时间
        selectHelper: true,//当点击或拖动选择时间时，显示默认加载的提示信息，该属性只在周/天视图里可用。
        select: function(start, end, allDay) {//选中某个时间
            var view = calendar.fullCalendar('getView');
            if (view.type != 'month'){
                return;
            }
            calendar.fullCalendar('gotoDate', $.fullCalendar.moment(start._d));
            calendar.fullCalendar('changeView', 'agendaDay');

        },
        viewRender : function(view, element){//**当新的日期区间渲染后或者视图切换后触发**
            $("#details").hide();
            var type = $('#calendar').fullCalendar('getView').type;
            if (type == "agendaWeek" || type == "basicWeek"){
                type = 'week';
            }else if (type == "agendaDay" || type == "basicDay"){
                type = 'day';
            }else{
                type = 'month';
            }
            var data = new Array();
            var changePlan  = new Array();var routine;var othertasks;var release;
            $("#calendar").fullCalendar('removeEvents');
            if(arrayFindString(select,"change")!=null || arrayFindString(select,"all")!=null){
                if(select.length>1 ||arrayFindString(select,"all")!=null){
                    changePlan = jQueryAjax("/changeCalendarAction/changePlan", {
                        "viewType" : type,
                        "viewDate" : formatDate($('#calendar').fullCalendar('getDate')._d,'yyyy/MM/dd'),
                        "mult":1,
                    },null, 'get');
                }else {
            changePlan = jQueryAjax("/changeCalendarAction/changePlan", {
                "viewType" : type,
                "viewDate" : formatDate($('#calendar').fullCalendar('getDate')._d,'yyyy/MM/dd'),
                "mult":0,
            },null, 'get');
                }
                data = data.concat(changePlan);
            }
            if(arrayFindString(select,"routine")!=null || arrayFindString(select,"all")!=null){
                if(select.length>1 ||arrayFindString(select,"all")!=null) {
                    routine = jQueryAjax("/planTaskCalendarAction/changePlan", {
                        "viewType": type,
                        "viewDate": formatDate($('#calendar').fullCalendar('getDate')._d, 'yyyy/MM/dd'),
                        "other": 0,
                        "mult":1,
                    }, null, 'get');
                }else {
                    routine = jQueryAjax("/planTaskCalendarAction/changePlan", {
                        "viewType": type,
                        "viewDate": formatDate($('#calendar').fullCalendar('getDate')._d, 'yyyy/MM/dd'),
                        "other": 0,
                        "mult":0,
                    }, null, 'get');
                }

                data = data.concat(routine);
            }
            if(arrayFindString(select,"othertasks")!=null || arrayFindString(select,"all")!=null){
                if(select.length>1||arrayFindString(select,"all")!=null) {
                othertasks = jQueryAjax("/planTaskCalendarAction/changePlan", {
                "viewType" : type,
                "viewDate" : formatDate($('#calendar').fullCalendar('getDate')._d,'yyyy/MM/dd'),
                "other":1,
                "mult":1,
                    },null, 'get');}
                else {
                    othertasks = jQueryAjax("/planTaskCalendarAction/changePlan", {
                        "viewType" : type,
                        "viewDate" : formatDate($('#calendar').fullCalendar('getDate')._d,'yyyy/MM/dd'),
                        "other":1,
                        "mult":0,
                    },null, 'get');
                }
                data = data.concat(othertasks);
            }
            if(arrayFindString(select,"report")!=null || arrayFindString(select,"all")!=null){
                if(select.length>1||arrayFindString(select,"all")!=null) {
                    release = jQueryAjax("/releaseCalendarAction/changePlan", {
                "viewType" : type,
                "viewDate" : formatDate($('#calendar').fullCalendar('getDate')._d,'yyyy/MM/dd'),
                "mult":1,
                    },null, 'get');}else {
                    release = jQueryAjax("/releaseCalendarAction/changePlan", {
                        "viewType" : type,
                        "viewDate" : formatDate($('#calendar').fullCalendar('getDate')._d,'yyyy/MM/dd'),
                        "mult":0,
                    },null, 'get');
                }
                data = data.concat(release);
            }
            for (var i = 0; i < data.length; i++){
                var start = new Date(data[i][3]);
                var end = new Date(data[i][4]);
                $("#calendar").fullCalendar('renderEvent',{
                    "id" : data[i][0],
                    "title" : data[i][1],
                    "start" : start,
                    "startTime" : start,
                    "end" : end,
                    "endTime" : end,
                    "type" : data[i][9],
                    "content" : data[i][2],
                    "className" : data[i][5],
                    "ourl" : data[i][13]
                },true);
            }
        },
        eventClick: function(calEvent, jsEvent, view) {//当点击日历中的某一日程（事件）时，触发此操作
            $("#details").hide();
            var url = getRootPath() + calEvent.ourl;
            window.parent.Addtabs.add({
               id: calEvent.id,
               title: calEvent.title,
               content: "",
               url: url + calEvent.id
            });
        },
        eventMouseover : function(event, jsEvent, view){//鼠标划过的事件
        },
        eventMouseout : function(event, jsEvent, view){//鼠标离开的事件
        }
    });
     })
</script>
</body>
</html>