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的初始化，包括一些事件以及參數的設置

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

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

　　三、timezone這個感受設置跟沒設置區別不大，沒有用到，也沒作深刻了解。

　　四、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中的日期時間的話，很強大

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