fullcalendar插件用法

管理系統里面采用了fullcalendar插件，遇到幾個問題，總結下：

官方英文文檔：https://fullcalendar.io/docs/

中文文檔：https://www.helloweba.net/javascript/445.html

 

初始化模板：

HTML:
<div id='calendarSetting'>
    <div class="datetime-picker"></div>
</div>

<script>
    $(function () {


        // 打鈎按鈕的節點(這個就是下圖背景藍色的日程，被我用CSS改成打√的)
        var htmlnode = '<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end fc-draggable fc-resizable"><div class="fc-content node-height"><span class="fc-title circle-position"> </span></div><div class="fc-resizer fc-end-resizer"></div></a>';


        //  fullcalendar日程插件初始化
        $('#calendarSetting').fullCalendar({
            // 頭部定義
            header: {
                left: '',
                center: 'prev, today ,next,checkbox',
                right: ''
            },
            // 日歷高度
            height: 650,
//            默認日期
            defaultDate: defaultDate,
            // 時間顯示模板
            views: {
                month: {
                    titleFormat: 'YYYY, MM, DD'

                }
            },

            // 每周的第一天從星期一開始
            firstDay: 1,
            navLinks: true, // can click day/week names to navigate views editable: true, eventLimit: true, // allow "more" link when too many events
            // defaultDate: '2018-02-12',這個可以設置一開始進來顯示的默認日期
            selectable: true,
            selectHelper: true,
            // 設置中文
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            buttonText: {
                today: '本月',
                month: '月',
                week: '周',
                day: '日',
                prev: '上一月',
                next: '下一月'
            },
            // 當點擊日歷中的某一日程（事件）時，觸發此操作，原來沒有的日程，點上去，觸發這個
            dayClick: function (date, jsEvent, view) {

                var $this = $(this);
                // 判斷是否有打鈎圖案按鈕節點
                var flag = $this.children('.fc-day-grid-event').length;
                // 如果有，則取消該按鈕節點，並且刪除要提交的對應數據
                var clickDate = new Date(date);
                var year = clickDate.getFullYear();
                var month = (clickDate.getMonth() + 1) < 10 ? "0" + (clickDate.getMonth() + 1) : (clickDate.getMonth() + 1);
                var day = clickDate.getDate() < 10 ? "0" + clickDate.getDate() : clickDate.getDate();
                var submitDate = year + "-" + month + "-" + day;
                if (flag) {
                    $(this).empty();
                    AJAX請求

                } else {
                    // 如果沒有，添加圖案節點，並且將日期添加到數組
                    $(this).append(htmlnode);
                    AJAX請求

                }
                console.log(submitDate);
            },
            // 取消原來保存的數據，后台獲取來的數據，顯示上來，想取消的，觸發這個
            eventClick: function (event, jsEvent, view) {
                // 將原數據庫有的日程日期取消后，放到取消的數組里面，最后作對比
//                console.log(event);
                var submitDate = event.start._i;
                AJAX請求
                // 取消原來保存的數據圖標
                $(jsEvent.currentTarget).parent().empty();

            },
            editable: false,
            // 初始化數據，可以放這個地方，也可以放下面的地方
            // events: evnetsData,
        })

        // 初始化數據
        $('#calendarSetting').fullCalendar('addEventSource', evnetsData);
        // 上一個月按鈕點擊事件
        $('.fc-prev-button').on('click', function () {
            AJAX請求
        });
        // 本月按鈕點擊事件
        $('.fc-today-button').on('click', function () {
            AJAX請求
        });
        // 下一個月按鈕點擊事件
        $('.fc-next-button').on('click', function () {
            AJAX請求
        });

       

        }

        function ajaxDate(submitDate,remove){
            $.ajax({
                url: "jf/vacationsSettings/o_doSave?day=" + submitDate + remove ,
                type: "GET",
                processData: false,
                contentType: false,
                dataType: 'json',
                async:false,
                success: function (json) {
                    if (json.statusCode == '200') {
                        alertMsg.correct('您的數據提交成功！')
                    } else {
                        alertMsg.warn(json.message);
                    }
                },
                error: function (e) {
                    alertMsg.warn(e);
                }
            });
        }

        // 選中的背景 顏色圖標
        function chooseWeekend(node) {
            $(node).append(htmlnode);
        }

        // 取消被選中的背景顏色，圖標
        function unchooseWeekend(node) {
            $(node).empty();
        }


//        數據遍歷改變成插件所需要格式
        function traversalData(dataListArray){
            var newDataListArray = []
            $.each(dataListArray, function (i,item) {
                newDataListArray[i] = {};
                newDataListArray[i]["start"] = item;
            });
            return newDataListArray;
        };

　　　　　　　　　　　　//上個月，下個月，本月，我原來用addEventSource去追加數據，發現數據會重復，圖標會重疊。后來才知道
　　　　　　　　　　　　//先刪除數據，再追加數據，再獲取。這三個幫我很大的忙　　,使用在AJAX請求完成數據后使用　　　　　　　　　
　　　　　　　　　　　　　$('#calendarSetting').fullCalendar( 'removeEventSource', evnetsData);
                    $('#calendarSetting').fullCalendar( 'addEventSource', evnetsData);
                    $('#calendarSetting').fullCalendar( 'refetchEvents' );

}) </script>

　　

 

①插件顯示是這樣的：

只能通過改變樣式，改成設計稿的。

 

②上個月下個月，我是直接獲取按鈕的的類名，去寫點擊事件：

// 上一個月按鈕點擊事件
$('.fc-prev-button').on('click', function () {});
// 本月按鈕點擊事件
$('.fc-today-button').on('click', function () {});
// 下一個月按鈕點擊事件
$('.fc-next-button').on('click', function () {});

③自己點的點擊事件，那怎么獲取到對應的時間呢？
　　插件提供好的，這樣獲取點擊事件的時間：moment = $('#calendarSetting').fullCalendar('getDate')