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 請移步官網文檔。