FullCalendar日程插件

  版本4.3.1

 

 

 

 坑倒是沒遇到什么，就是刷新看了好久的文檔o(╥﹏╥)o

下面就開始貼代碼

 //加載日歷
    function fullCalendarInit() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'zh-cn',//顯示中文
            defaultDate: timeFormat(new Date(), "yyyy-MM-dd"),
            plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
            },
            businessHours: true, // 顯示營業時間（即周一~周五）
            navLinks: true, // 點擊日或者周的名字跳轉詳細頁面
            selectable: true,
            selectMirror: true,
            select: function (arg) {//點擊日歷空白區域
                clearData();//清空彈窗數據
                showModal();//彈出彈窗
                calendar.unselect();//清空點擊
            },
            editable: true,
            eventLimit: true, // 事件太多顯示更多
            events: function (info, successCallback, failureCallback) {//加載事件
                var json = new Array();
                json = GetEvents(info.start, info.end);//獲取事件
                successCallback(json);//回調函數
                //返回數據字段
                //id:標識
                //title:標題
　　　　　　　　　 //color:事件顏色
　　             //textColor:標題顏色
                //start:開始時間
                //end:結束時間
　　　　　　　　   //editable:是否可拖動

            },
            eventTimeFormat: { //事件顯示時:分
                hour: '2-digit',
                minute: '2-digit',
                hour12: false
            },
            eventClick: function (info) {//點擊事件
                clearData();//清空彈窗數據
                fullCalendarEdit(info.event.id);//編輯事件
            },
            eventDrop: function (info) {//拖拽事件
                var arr = new Array();
                arr = fullCalendarDropOrResize(info.event.id, info.event.start, info.event.end)
                if (arr[0] <= 0) {//如果操作失敗，就恢復沒有拖拽之前的狀態
                    info.revert();
                }
            },
            eventResize: function (info) {//改變事件時間大小
                var arr = new Array();
                arr = fullCalendarDropOrResize(info.event.id, info.event.start, info.event.end)
                if (arr[0] <= 0) {//如果操作失敗，就恢復沒有拖拽之前的狀態
                    info.revert();
                }
            },
            eventMouseEnter: function (info) {//鼠標懸停事件
              
            }
        });

        calendar.render();
        cal = calendar;//用於刷新數據
    }
 //刷新日歷
    function refreshEvent() {
        cal.refetchEvents();
    }

 版本2.3.2

　　

 

 

 貼代碼~~~

 //文檔加載
    $(document).ready(function () {
        //加載日歷
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            today: ["今天"],
            buttonText: {
                today: '今天',
                month: '月',
                week: '周',
                day: '日',
                prev: '<',
                next: '>'
            },
            eventLimit: true, // 事件太多顯示更多
            eventTimeFormat: "HH:mm",
            defaultDate: timeFormat(new Date(), "yyyy-MM-dd"),
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar
            events: function (begin, end, timezone, callback) {//加載事件
                var json = new Array();
                json = GetEvents(begin, end);//獲取事件
                callback(json);//回調函數
            },
            dayClick: function (date, jsEvent, view) {//點擊日歷空白區域
                clearData();//清空彈窗數據
                showModal();//彈出彈窗
            },
            eventClick: function (calEvent, jsEvent, view) {//點擊事件
                clearData();
                fullCalendarEdit(calEvent.id);
            },
            eventDrop: function (event, delta, revertFunc) {//拖拽事件
                var arr = new Array();
                arr = fullCalendarDropOrResize(event.id, event.start, event.end)
                if (arr[0] <= 0) {//操作失敗，恢復原狀
                    revertFunc();
                }
            },
            eventResize: function (event, delta, revertFunc) {//改變事件時間大小
                var arr = new Array();
                arr = fullCalendarDropOrResize(event.id, event.start, event.end)
                if (arr[0] <= 0) {//操作失敗，恢復原狀
                    revertFunc();
                }
            }
        });
    });
//刷新日歷
    function refreshEvent() {
        $('#calendar').fullCalendar('refetchEvents');
    }

整理完成~~周五快樂