fullcalendar之我思故我在

　　首先簡單說一下fullcalendar插件，fullcalendar是一個jquery日歷插件，主要用來做日歷日程會議等的安排展示等。

　　因為項目中用到了fullcalendar，也碰到了一些問題，因此記錄一下，以備下次使用，也給后來者以幫助。

　　要使用fullcalendar，首先要在頁面引用關鍵的js文件

<link href="~/Content/fullcalendar/fullcalendar.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Content/fullcalendar/lib/moment.min.js"></script>
<script src="~/Content/fullcalendar/fullcalendar.js"></script>

包括基本樣式文件，jquery庫，以及Moment.js。moment.js是一個相當強大的時間處理庫，這個也導致在開發中遇到了個坑。

頁面中添加相應的元素，比如我測試的

<div id="calendar"></div>

在頁面的js中加入如下代碼，下邊會詳細做說明

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                //right: 'month,agendaWeek,agendaDay' //帶小時
                right: 'month,basicWeek,basicDay'
            },
            height: 500,
            defaultDate: new Date(),
            timezone: "local",
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            eventClick: function (event) {
                var time = moment(event.start);
                var startTime = time.format("YYYY/MM/DD");
                ShowInfo(event.id, event.title, event.state, startTime, event.performance, event.userName);
            },
            @*viewRender: function (view) {//動態查詢數據並展示
                var s = moment(view.start);
                var start = s.format("YYYY/MM/DD HH:mm:ss");
                var e = moment(view.end);
                var end = e.format("YYYY/MM/DD HH:mm:ss");
                $("#calendar").fullCalendar('removeEvents');
                $.post("@Url.Content("~/Operation/GetList")", { userId: "liu", startTime: start, endTime: end }, function (data) {
                    var result = data.data;
                    $.each(result, function (index, term) {
                        $("#calendar").fullCalendar('renderEvent', term, true);
                    });

                }, "JSON");//把從后台取出的數據進行封裝以后在頁面上以fullCalendar的方式進行顯示
        },*@
            eventAfterRender: function (event, element, view) {
                //$(element).on("dblclick", function () {
                //});
            },

　　　　　　　　eventRender: function (event, element) {
　　　　　　　　},

            events: function (start, end, timeZone, callback) {
                var s = moment(start);
                var start = s.format("YYYY/MM/DD HH:mm:ss");
                var e = moment(end);
                var end = e.format("YYYY/MM/DD HH:mm:ss");
                $("#calendar").fullCalendar('removeEvents');
                $.post("@Url.Content("~/Operation/GetList")", { userId: "liu", startTime: start, endTime: end }, function (data) {
                    var result = data.data;
                    //$.each(result, function (index, term) {
                    //    $("#calendar").fullCalendar('renderEvent', term, true);
                    //});
                    callback(result);

                }, "JSON");//把從后台取出的數據進行封裝以后在頁面上以fullCalendar的方式進行顯示
            }
        });

　　fullcalendar的初始化，包括一些事件以及參數的設置

　　1、header下的left設置日歷左邊部分的按鈕，表示切換上月，上周下月下周等，right設置日歷的基本展示方式，注釋的地方有說明，一種精確到小時，一種只是到天。

　　2、defaultDate即設置日歷初始化時默認顯示的月份日期。

　　3、timezone這個感覺設置跟沒設置區別不大，沒有用到，也沒做深入了解。

　　4、eventlimit設置當一個日期下日程多的時候是否顯示More來展示

　　重點說一下日程時間數據的展示渲染，一種是通過event相關的事件或者方法來展示，包括events數組，對象，函數等獲取數據源，然后綁定到日歷，另外一種是viewrender的方法綁定，不推薦后一種，因為有些時候不可控，很難處理。

　　events可以是直接的數組，events可以是json對象，也可以是function，本文就是采用的function的方法處理的，因為事件可能很多，因此采用動態切換日歷時去加載，所以要取到當前日歷視圖的起始時間，然后對起始時間的處理。之前版本是fullcalendar將moment.js的方法集成在自身中，直接調用

$.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss"),現在需要引用moment.js自己處理，但是也很簡單，代碼中有詳細使用，取到數據之后直接調用callback(data)此時即調用了eventRender方法，該方法可以什么都不寫，也可以寫自己需要處理的邏輯，也可以使用代碼中注釋掉的三行，自己去循環然后綁定事件到日歷。
eventclick是對點擊事件時需要做的處理，event參數包含了該event的所有屬性方法。
問題：fullcalendar 沒有對事件做雙擊事件的封裝，呢我們怎么處理？可以在eventAfterRender方法中處理，代碼中有注釋說明。
如果我單擊事件，彈出事件詳細信息，然后我對事件做了修改，呢么我如何同步該修改到日歷呢？這就是事件數據呈現時用events的好處了，此時可以直接調用 $("#calendar").fullCalendar('refetchEvents'); 即可重新渲染事件了。
最后推薦下moment.js，如果需要處理js中的日期時間的話，很強大

---恢復內容結束---