摘要：插件的依賴文件插件的使用頁面結(jié)構(gòu)設(shè)置日歷頭部信息，如果設(shè)置為，則不顯示頭部信息。設(shè)置日歷的高度，包括日歷頭部，默認(rèn)未設(shè)置，高度根據(jù)值自適應(yīng)。

先說一下我的另一博客地址: https://home.cnblogs.com/u/bllx/

前段時間，一直在開發(fā)考勤系統(tǒng)，當(dāng)時為滿足設(shè)計的需求，選了好幾個插件，最后決定采用Fullcanlendar的插件。感覺這個插件可以滿足現(xiàn)階段的功能開發(fā)需求；因為設(shè)計圖是日歷塊的展示以及每天的日歷還有功能需求點，因此，想到了可以實現(xiàn)備忘錄的功能的FullCalendar插件。

為了實現(xiàn)設(shè)計圖，插件自身的樣式還是有些丑的，因此，很多樣式細(xì)節(jié)需要修改，插件的使用難點在于實現(xiàn)數(shù)據(jù)的渲染。

$("#calendar").fullCalendar({
                    /*設(shè)置日歷頭部信息，如果設(shè)置為false，則不顯示頭部信息。
                     * 包括left,center,right左中右三個位置都可以對應(yīng)一下配置
                     * title:顯示當(dāng)前月份/周、日信息
                     * prev:用于切換到上一月/周/日視圖的按鈕
                     * next:用于切換到下一月/周/日視圖的按鈕
                     * prevYear：用于切換到上一年視圖的按鈕
                     * nextYear：用于切換到下一年視圖的按鈕
                     * */
                    header:{
                            left: "",
                            center: "Fullcanlendar示例demo",
                            right: "today prev,next"
                            },
                    theme:false,//如果設(shè)置為true，則需要加載jquery ui相關(guān)css和js文件,默認(rèn)值為false
                    firstDay:1,//設(shè)置一周中顯示的第一天是哪天，周日是0，周一是1，類推
                    isRTL:false,//設(shè)置為ture時則日歷從右往左顯示
                    weekends:true,//是否顯示周末，設(shè)為false則不顯示周六和周日。默認(rèn)值為true
                    hiddenDays:[],//隱藏一周中的某一天或某幾天，數(shù)組形式，如隱藏周二和周五：[2,5]，默認(rèn)不隱藏，除非weekends設(shè)置為false。
                    weekMode:"fixed",//在月視圖里顯示周的模式，因為每月周數(shù)可能不同，所以月視圖高度不一定。fixed：固定顯示6周高，日歷高度保持不變liquid：不固定周數(shù)，高度隨周數(shù)變化variable：不固定周數(shù)，但高度固定
                    weekNumbers:false,//是否在日歷中顯示周次(一年中的第幾周)，如果設(shè)置為true，則會在月視圖的左側(cè)、周視圖和日視圖的左上角顯示周數(shù)。
                    weekNumberCalculation:"iso",//周次的顯示格式。
                    //height:600,//設(shè)置日歷的高度，包括header日歷頭部，默認(rèn)未設(shè)置，高度根據(jù)aspectRatio值自適應(yīng)。
                    //contentHeight://設(shè)置日歷主體內(nèi)容的高度，不包括header部分，默認(rèn)未設(shè)置，高度根據(jù)aspectRatio值自適應(yīng)。
                    aspectRatio:1.35,//設(shè)置日歷單元格寬度與高度的比例。
                    handleWindowResize:true,//是否隨瀏覽器窗口大小變化而自動變化。
                    render:function(view){
                        console.log("render",view)
                    },//method,綁定日歷到id上。$("#id").fullCalendar("render");
                    destroy:function(){
                        
                    },
                    weekNumbers : false,     //是否在視圖左邊顯示這是第多少周，默認(rèn)false
            
                    eventLimit: true,       //數(shù)據(jù)條數(shù)太多時，限制各自里顯示的數(shù)據(jù)條數(shù)（多余的以“+2more”格式顯示），默認(rèn)false不限制,支持輸入數(shù)字設(shè)定固定的顯示條數(shù)
     
                    viewRender : function(view,element){//在視圖被渲染時觸發(fā)（切換視圖也觸發(fā)） 參數(shù)view為視圖對象，參數(shù)element為Jquery的視圖Dom
                            
                    },
      
                    dayRender : function(date, cell){//日期格式Render鉤子函數(shù)（我沒理解清楚）
                        console.log("↓↓↓dayRender↓↓↓");
                        console.log(date);
                        console.log(cell);
                    },
                    windowResize : function(){//瀏覽器窗體變化時觸發(fā)
                        console.log("---windowResize---");
                    },
    
                    allDayText : "全天",            //自定義全天視圖的名稱
                    slotDuration : "01:00:00",      //一格時間槽代表多長時間，默認(rèn)00:30:00（30分鐘）
                    slotLabelFormat : "H(:mm)a",    //日期視圖左邊那一列顯示的每一格日期時間格式
                    slotLabelInterval : "02:00:00", //日期視圖左邊那一列多長間隔顯示一條日期文字(默認(rèn)跟著slotDuration走的，可自定義)
                    snapDuration : "05:00:00",      //其實就是動態(tài)創(chuàng)建一個日程時，默認(rèn)創(chuàng)建多長的時間塊
      
                    slotEventOverlap : false,       //相同時間段的多個日程視覺上是否允許重疊，默認(rèn)true允許
    
                    noEventsMessage : "L沒數(shù)據(jù)啊",   //listview視圖下，無數(shù)據(jù)時顯示提示
                    defaultDate  : "2018-09-10",    //默認(rèn)顯示那一天的日期視圖getDates(true)
                    nowIndicator : true,            //周/日視圖中顯示今天當(dāng)前時間點（以紅線標(biāo)記），默認(rèn)false不顯示
                    monthNames : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份自定義命名
                    monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份縮略命名（英語比較實用：全稱January可設(shè)置縮略為Jan）
                    dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],       //同理monthNames
                    dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  //同理monthNamesShort
                    weekNumberTitle : "周",         //周的國際化,默認(rèn)為"W"
    
                    eventLimitText  : "更多",       //當(dāng)一塊區(qū)域內(nèi)容太多以"+2 more"格式顯示時，這個more的名稱自定義（應(yīng)該與eventLimit: true一并用）
                    dayPopoverFormat : "YYYY年M月d日", //點開"+2 more"彈出的小窗口標(biāo)題，與eventLimitClick可以結(jié)合用
                    navLinks : true,                // “xx周”是否可以被點擊，默認(rèn)false，如果為true則周視圖“周幾”被點擊之后進入日視圖。本地測試：沒什么效果
                      
                    dayClick: function(date, jsEvent, view) {//空白的日期區(qū)，單擊時觸發(fā)
                        console.log("↓↓↓dayClick↓↓↓");
                        console.log("Clicked on: " + date.format());
                        console.log("Coordinates: " + jsEvent.pageX + "," + jsEvent.pageY);
                        console.log("Current view: " + view.name);
                        
                        //$(this).css("background-color", "red");
                    },
                    eventClick: function(calEvent, jsEvent, view) {//日程區(qū)塊，單擊時觸發(fā)
                        console.log(jsEvent.target)
                        alert(jsEvent.target.innerHTML)
                        console.log("↓↓↓eventClick↓↓↓");
                        console.log("Event: " + calEvent.title);
                        console.log("Coordinates: " + jsEvent.pageX + "," + jsEvent.pageY);
                        console.log("Current view: " + view.name);
                        
                        return false;  //return false可以阻止點擊后續(xù)事件發(fā)生（比如event中的url跳轉(zhuǎn)事件）
                    },
                    eventMouseover: function(calEvent, jsEvent, view){//鼠標(biāo)在日程區(qū)塊上時觸發(fā)
                            
                        console.log(jsEvent)
                        console.log(calEvent.start._i)
                        $(".hover-dateStr").html(calEvent.start._i)
                        console.log(jsEvent.pageY,jsEvent.pageX)
                        $(".hover-container").removeClass("none").animate({"top":jsEvent.pageY,"left":jsEvent.pageX})
                        if(!canRun){
                            // 判斷是否已空閑，如果在執(zhí)行中，則直接return
                            return;
                        }
                    },
                    eventMouseout: function(calEvent, jsEvent, view){//鼠標(biāo)從日程區(qū)塊離開時觸發(fā)
                        $(".hover-container").addClass("none")
                    },
                    selectable: false,           //允許用戶可以長按鼠標(biāo)選擇多個區(qū)域(比如月視圖，可以選中多天；日視圖可以選中多個小時)，默認(rèn)false不能選擇多區(qū)域的
                    selectHelper: true,         //接selectable，周/日視圖在選擇時是否預(yù)先畫出“日程區(qū)塊”的樣式出來
                    unselectAuto : true,        //是否點擊頁面上的其他地方會導(dǎo)致當(dāng)前的選擇被清除，默認(rèn)true
                    unselectCancel : "",        //一種方法來指定元素，會忽略unselectauto選項，默認(rèn)""
                    selectOverlap : true,       //確定用戶是否被允許選擇被事件占用的時間段，默認(rèn)true可占用時間段
                    
                    selectAllow : function(selectInfo){ //精確的編程控制用戶可以選擇的地方，返回true則表示可選擇，false表示不可選擇
                        console.log("↓↓↓selectConstraint↓↓↓");
                        console.log("start:"+selectInfo.start+"|end:"+selectInfo.end+"|resourceId:"+selectInfo.resourceId);
                        return true;
                    },
                    select: function(start, end,jsEvent,view) { //點擊空白區(qū)域/選擇區(qū)域內(nèi)容觸發(fā)
    
                    },
                    unselect : function(view, jsEvent){//選擇操作取消時觸發(fā)
                        console.log("↓↓↓unselect↓↓↓");
                        console.log("view:"+view);
                    },
                      
                    lazyFetching : true,        //是否啟用懶加載技術(shù)--即只取當(dāng)前條件下的視圖數(shù)據(jù)，其它數(shù)據(jù)在切換時觸發(fā)，默認(rèn)true只取當(dāng)前視圖的，false是取全視圖的
                    defaultTimedEventDuration : "02:00:00",     //在Event Object中如果沒有end參數(shù)時使用，如start=7:00pm，則該日程對象時間范圍就是7:00~9:00
                    defaultAllDayEventDuration : { days: 1 },  //默認(rèn)1天是多長，（有的是采用工作時間模式，所以支持自定義）
                    loading : function(isLoading, view){ //視圖數(shù)據(jù)加載中、加載完成觸發(fā)
                            console.log("↓↓↓loading↓↓↓");
                            if(isLoading == true){
                                console.log("view:"+view+",開始加載");
                            }else if(isLoading == false){
                                console.log("view:"+view+",加載完成");
                            }else{
                                console.log("view:"+view+",除非天塌下來否則不會進這個分支");
                            }
                        },
          
                        eventOrder : "title",           //多個相同的日程數(shù)據(jù)排序方式，String / Array / Function, 默認(rèn)值: "title"
                        eventRender : function(event, element, view) {          //當(dāng)Event對象開始渲染時觸發(fā)
                            console.log("eventRender():"+event.title);
                        },
                        eventAfterAllRender : function(view){console.log("eventAfterAllRender();");},   //當(dāng)所有Event對象渲染完成時觸發(fā)
                        editable: true,                 //支持Event日程拖動修改，默認(rèn)false
                        eventStartEditable : true,      //Event日程開始時間可以改變，默認(rèn)true，如果是false其實就是指日程塊不能隨意拖動，只能上下拉伸改變他的endTime
                        eventDurationEditable : false,  //Event日程的開始結(jié)束時間距離是否可以改變，默認(rèn)true，如果是false則表示開始結(jié)束時間范圍不能拉伸，只能拖拽
         
                        dragOpacity:0.2,                //拖拽時不透明度，0.0~1.0之間，數(shù)字越小越透明
                        dragScroll : true,              //是否在拖拽時自動移動容器，默認(rèn)true
                        eventOverlap : true,            //拖拽時是否重疊
                        eventConstraint : {     //限制拖拽拖放的位置（即限制有些地方拖不進去）：an event ID, "businessHours", object
                            start: "10:00",     // a start time (10am in this example)
                            end: "18:00",       // an end time (6pm in this example)
                            dow: [ 1, 2, 3, 4 ] // days of week. an array of zero-based day of week integers (0=Sunday)  (Monday-Thursday in this example)
                        },
                        longPressDelay : 1000,  //面向可touch設(shè)備（如移動設(shè)備），長按多少毫秒即可拖動,默認(rèn)1000毫秒（1S）
                        eventDragStart : function(event, jsEvent, ui, view){    //日程開始拖拽時觸發(fā)
                            console.log("eventDragStart():"+event.title);
                        },
                        eventDragStop : function(event, jsEvent, ui, view){     //日程拖拽停止時觸發(fā)
                            console.log("eventDragStop():"+event.title);
                        },
                        eventDrop : function(event, delta, revertFunc, jsEvent, ui, view){  //日程拖拽停止并且已經(jīng)拖拽到其它位置了
                            console.log("eventDrop():"+event.title);
                        },
                        eventResizeStart : function( event, jsEvent, ui, view ) {       //日程大小調(diào)整開始時觸發(fā)
                            console.log("eventResizeStart():"+event.title);
                        },
                        eventResizeStop : function(event, jsEvent, ui, view){           //日程大小調(diào)整停止時觸發(fā)
                            console.log("eventResizeStop():"+event.title);
                        },
                        eventResize : function(event, delta, revertFunc, jsEvent, ui, view){    //日程大小調(diào)整完成并已經(jīng)執(zhí)行更新時觸發(fā)
                            console.log("eventResize():"+event.title);
                        },
                        events:[
                                    {
                                        "time": "9:20--18:20",
                                        "antualTime":"9:40--18:40",
                                        "start": "2018-09-01"
                                        
                                    },
                                    {
                                        "time": "9:40--18:40",
                                        "antualTime":"9:40--18:40",
                                        "start": "2018-09-02"
                                    }
                                ]
                    });

如果將數(shù)據(jù)源向上述代碼中放置的話，是直接一次渲染所有數(shù)據(jù)，在切換不同月份的時候，將不會再次渲染，這就會在頁面一開始加載時請求服務(wù)器，渲染所有數(shù)據(jù)，源碼中在切換前后相鄰月份的時候，也是重新渲染了數(shù)據(jù)，我們想要的是在切換月份的時候，再去請求服務(wù)器獲取該月份的數(shù)據(jù)

//初始化日程表  
                   events:function(start, end, timezone,callback){ 
                        var date = this.getDate().format("YYYY-MM");
                        var arr=date.split("-");
                        var events = loopMonthDay(arr[0],arr[1]);// loopMonthDay(arr[0],arr[1]);是自己封裝的函數(shù)
                        callback(events);//回調(diào)中執(zhí)行渲染
                   }