摘 要：FullCalendar是一款非常優(yōu)秀的日歷控件，不但可以用做日歷使用，更重要的提供了非常多的回調(diào)函數(shù)，開發(fā)者使用它可以方便的實現(xiàn)諸如會議安排、房間預定、時間安排等功能，同時允許設(shè)計人員自己修改樣式，提供中文支持。

關(guān)鍵詞：FullCalendar；Ajax；JSON

中圖分類號：TP312.2

首先，F(xiàn)ullCalendar是款基于JQuery的日歷插件，它運用Ajax技術(shù)來讀取每一個月的日歷事件并能夠配置成使用自己的日歷事件來源，例如從Google Calendar獲取事件。支持拖放日歷中的事件，自定義點擊和拖放事件。Fullcalendar和JQuery一樣，主要是以面向?qū)ο蟮姆绞絹斫M織代碼。當然，這里所謂的面向?qū)ο髢H僅是指可以把整個Fullcalendar單獨理解為一個類，這個類中包括有很多的屬性、方法、委托（函數(shù)回調(diào)）作為成員變量。通過對這些成員變量賦值，即可實例化出一個符合自己需求的Fullcalendar實例出來，即最終在瀏覽器里渲染出一個日歷。換句話說，開發(fā)者需要做的絕大多數(shù)工作就是按照Fullcalendar的語法約定去配置出一個符合我們需求的Fullcalendar實例。除非對于極少的特殊需求，F(xiàn)ullcalendar向我們提供的接口不足以滿足，才會去修改Fullcalendar本身的js文件。

1 在Asp.Net中使用FullCalendar

Fullcalendar，目前最新版本是1.5.1?？梢缘焦芊骄W(wǎng)站下載開發(fā)包，其中包括一些常用的Demo。在使用FullCalendar之前，首先需要在aspx文件中添加引用，主要的引用文件如下：

如果與google日歷連接，別忘記加入。

接下來在頁面中使用JavaScript腳本實現(xiàn)Fullcalendar的初始化，設(shè)置相應(yīng)的參數(shù)，代碼如下：

最后在頁面的表記中添加一個用于顯示的DIV就可以了。代碼如下：

以上代碼在完成后，顯示在瀏覽器中的效果如圖1-1所示：

圖1-1 Fullcalendar顯示效果圖

通過圖1-1的顯示，可以方便的顯示出一個日歷，并且在日歷的每天都可以定義并顯示任務(wù)內(nèi)容，當然也可以具體到某一個時間點。這里主要是在events中，設(shè)置相應(yīng)的屬性來實現(xiàn)的，比如：title代碼顯示的內(nèi)容、start代碼顯示的起始日期時間、end代碼結(jié)束的日期時間、url代碼跳轉(zhuǎn)的地址等等，還有許多屬性參數(shù)可以參考說明文檔中的使用說明。

如果只是一個簡單的日歷及固定信息顯示，在實現(xiàn)應(yīng)用時也沒有太大的意義的。Json作為現(xiàn)在網(wǎng)頁中流行的數(shù)據(jù)交換格式，被廣泛的應(yīng)用，不論在Jquery中還是在Ajax中都可以看到它的身影。FullCalendar為了支持JSON數(shù)據(jù)源，所以后臺增加了JSON數(shù)據(jù)接口。FullCalendar雖然只是一個展示的控件，但它支持一些回調(diào)操作，因此可以利用它們來實現(xiàn)數(shù)據(jù)的交互。主要用到的回調(diào)函數(shù)包括：

（1）select ：在點擊或拖動來選擇時間時觸發(fā)，可以用來添加新事件。

（2）eventRender ：在渲染事件時觸發(fā)，可以用來給事件做一些修飾。

（3）eventDrop ：移動事件時觸發(fā)。

（4）eventResize ：調(diào)整事件范圍時觸發(fā)。

還有一些有用的回調(diào)操作，可以參看 官方文檔 。FullCalendar中把記錄稱為事件。

如果需要數(shù)據(jù)交互，可以使用jQuery的post方法實現(xiàn)的。

2 總結(jié)

當然，F(xiàn)ullCalendar運用領(lǐng)域非常廣泛，從日常日歷的顯示到會議的預定，從人員的安排到教室的預定，都可以使用它。這里只是一個簡單的討論，本插件已經(jīng)成功的運用在本人開發(fā)的多個系統(tǒng)中，效果非常好。

參考文獻：

[1]李冠男.用Google做外貿(mào)之Google Calendar展會管理[J].電子商務(wù)世界，2008-12-05.

[2]黃翠銀，梁玉玫.Google Calendar在成人學習時間管理中的應(yīng)用[J].繼續(xù)教育研究，2009-07-15.