jQuery 日歷控件 FullCalendar 初識

最近有個日程管理的需求，就學習了一下 FullCalendar 控件的一些基本知識，本文不是詳細介紹該控件的 API 的文檔，而是記錄本人使用過程中的一些學習情況。

先看一下效果圖  月/周/日視圖  黃色表示今天：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

其中有兩個事項，rrr 和 test 是名稱，7a 和 5a 是開始時間，其中 a 表示上午，同理 p 表示下午，周視圖和日視圖左側都有時間軸。

在 html 中建立一個空的 div ：

<div id='fullCalendarDemo'>
</div>

接下來就是 js 代碼了，詳細的解釋會寫在注釋里，可以配合插圖看，方便理解，代碼中寫 //TODO 的地方需要自己編寫相關界面代碼，一般為彈窗，或者新頁面等來對事項進行增刪改：

$(document)
    .ready(
        function() {
            $('#fullCalendarDemo')
                .fullCalendar({                                  //初始化日歷
                    header: { 　　　　　　　　　　　　　　　　　　　　//日歷最上面表示頭部
                        left: 'prev,next today', 　　　　　　　　　//左邊是 前一月/周/日，后一月/周/日  以及  回到今天按鈕
                        center: 'prevYear,title,nextYear', 　　　//中間是  去年的本月/周/日  當前試圖的時間   明年的本月/周/日
                        right: 'month,agendaWeek,agendaDay' 　　//切換日歷顯示月/周/日視圖
                    },
                    monthNames: ["一月", "二月", "三月", "四月", 　//設置月份名稱，中英文均可
                        "五月", "六月", "七月", "八月", "九月",
                        "十月", "十一月", "十二月"
                    ],
                    monthNamesShort: ["一月", "二月", "三月", 　　//設置月份的簡稱
                        "四月", "五月", "六月", "七月", "八月",
                        "九月", "十月", "十一月", "十二月"
                    ],
                    dayNames: ["周日", "周一", "周二", "周三", 　　//設置星期名稱
                        "周四", "周五", "周六"
                    ],
                    dayNamesShort: ["周日", "周一", "周二", 　　　　//設置星期簡稱
                        "周三", "周四", "周五", "周六"
                    ],
                    today: ["今天"], 　　　　　　　　　　　　　　　　//today 按鈕的顯示名稱
                    firstDay: 0, 　　　　　　　　　　　　　　　　　　//設置每星期的第一天是星期幾，0 是星期日
                    buttonText: { 　　　　　　　　　　　　　　　　　//設置按鈕文本
                        today: '今天',
                        month: '月',
                        week: '周',
                        day: '日',
                        prev: '上一月',
                        next: '下一月'
                    },
                    height: windowHeigth, 　　　　　　　　　　　　//設置日歷高度，寬度是自適應的，不好改，windowHeight 是我計算的值
                    currentTimezone: 'Asia/Beijing', 　　　　　　//設置時區
                    theme: true, 　　　　　　　　　　　　　　　　　//true 時日歷主題可隨 jQuery ui 的主題變化
                    selectable: true, 　　　　　　　　　　　　　　//元素是否可以被選中
                    selectHelper: true, 　　　　　　　　　　　　　//選中元素時是否顯示相關信息
                    select: function(startDate, endDate, 　　　//選中某元素的方法，startDate 事項的起始時間，endDate 事項的結束時間
                        allDay, jsEvent, view) { 　　　　　　　　// allDay 事項是否為全天事項，jsEvent 控件的內置對象，view 當前視圖
                        var startD = $.fullCalendar
                            .formatDate(startDate,
                                'yyyy-MM-dd HH:mm:ss'); 　　　　//formatDate 是格式化時間的方法
                        var endD = $.fullCalendar
                            .formatDate(endDate,
                                'yyyy-MM-dd HH:mm:ss');
                        //TODO      添加選中某元素時需要進行操作的方法，比如：添加會議、備注等事項
                    },
                    eventClick: function(event) { 　　　　　　　　//點擊事項的方法
                        var startD = $.fullCalendar
                            .formatDate(event.start,
                                'yyyy-MM-dd HH:mm:ss');
                        var endD = $.fullCalendar
                            .formatDate(event.end,
                                'yyyy-MM-dd HH:mm:ss');
                        //TODO      添加點擊某事項時需要進行操作的方法，比如：修改會議、備注等事項
                    },
                    editable: true, 　　　　　　　　　　　　　　　　//事項是否可編輯，改變大小、拖拽等
                    eventResize: function(event, dayDelta, minuteDelta, revertFunc) { 
　　　　　　　　　　　　//事項大小改變后的方法，往往修改事項的起止時間，event 改變的事項，dayDelta 變化的天數，minuteDelta 變化的分鍾數，revertFunc 回調函數
                        var startD = $.fullCalendar
                            .formatDate(event.start,
                                'yyyy-MM-dd HH:mm:ss');
                        var endD = $.fullCalendar
                            .formatDate(event.end,
                                'yyyy-MM-dd HH:mm:ss');

                        //TODO      添加改變某事項大小時需要進行操作的方法，比如：修改會議、備注等事項

                        if (!confirm("is this okay?")) {
                            revertFunc();        　　　　　　　　//如果不要改變，則將事項還原
                        }

                    },
                    eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {    //拖拽事項之后的方法，allDay 是否全天事項，其他參數同上
                        var startD = $.fullCalendar
                            .formatDate(event.start,
                                'yyyy-MM-dd HH:mm:ss');
                        var endD = $.fullCalendar
                            .formatDate(event.end,
                                'yyyy-MM-dd HH:mm:ss');

                        //TODO      添加拖拽某事項之后需要進行操作的方法，比如：修改會議、備注等事項

                        if (!confirm("is this okay?")) {
                            revertFunc();        
                        }

                    },
                    events: function(start, end, callback) {
                        //獲取事項的數據，這里是用的 function ，可以是 array ，也可以是 json
                    }
                });
        });

另外，還有幾個常用的方法：

$('#fullCalendarDemo').fullCalendar('refetchEvents');     對事項進行增刪改之后可以用來單獨刷新日歷控件，而不要重新讀取數據庫

$('#fullCalendarDemo').fullCalendar('updateEvent', event);    單獨刷新指定事項

$('#fullCalendarDemo').fullCalendar( 'gotoDate', year [, month, [ date ]] );     查看指定日期的日程，需要注意的是月份是從0開始的，即1月份為0，2月份為1······

一般日期的存儲會用 String 類型，在 parseInt 時有一點需要注意的是 IE 8 的不兼容（其他版本 IE 未測試）。

最后，就說說控件內置的 event Object 對象，只說幾個我認為比較需要談的參數：title、start 必選，考慮到數據存儲的問題，id 最好也是必選的，如果是全天事項，即 allDay 為 true，則 end 可以不填， 個人建議當這種情況時，可以設置 end 為當天的 00:00:00。

完整 API 請移步官網文檔。