摘 要：FullCalendar是一款非常優(yōu)秀的日歷控件，不但可以用做日歷使用，更重要的提供了非常好的數(shù)據(jù)接口，方便開發(fā)者從后臺以JSON格式讀取數(shù)據(jù)后顯示在日歷中，而且是無刷新的，用于體驗非常好。使用FullCalendar可以簡單快捷的開發(fā)出會議安排系統(tǒng)、預(yù)約系統(tǒng)等。

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

中圖分類號：TP393

首先，F(xiàn)ullCalendar是款基于JQuery的日歷插件，它運用Ajax技術(shù)來讀取每一個月的日歷事件并能夠配置成使用自己的日歷事件來源，例如從GoogleCalendar獲取事件。支持拖放日歷中的事件，自定義點擊和拖放事件。Fullcalendar和JQuery一樣，主要是以面向?qū)ο蟮姆绞絹斫M織代碼。當(dāng)然，這里所謂的面向?qū)ο髢H僅是指可以把整個Fullcalendar單獨理解為一個類，這個類中包括有很多的屬性、方法、委托（函數(shù)回調(diào)）作為成員變量。

1 FullCalendar中顯示數(shù)據(jù)表中信息

1.1 初始化FullCalendar

初始化工作可以放在$（window）.load（function（）中進行，如果需要顯示中文的年月日信息的話，需要進行額外的設(shè)置。主要代碼如下：

$（window）.load（function（）{

vardate=newDate（）；

vard=date.getDate（）；

varm=date.getMonth（）；

vary=date.getFullYear（）；

varpid=$（'#hid'）.attr（\"value\"）；//得到修改的id

varxh=$（'#hxh'）.attr（\"value\"）；//得到修改的xh

varcalendar=$（'#calendar'）.fullCalendar（{

header：{

left：'prev，nexttoday'，

center：'title'，

right：'month，agendaWeek，agendaDay'

}，

monthNames：[\"一月\"，\"二月\"，\"三月\"，\"四月\"，\"五月\"，\"六月\"，\"七月\"，\"八月\"，\"九月\"，\"十月\"，\"十一月\"，\"十二月\"]，

monthNamesShort：[\"一月\"，\"二月\"，\"三月\"，\"四月\"，\"五月\"，\"六月\"，\"七月\"，\"八月\"，\"九月\"，\"十月\"，\"十一月\"，\"十二月\"]，

dayNames：[\"周日\"，\"周一\"，\"周二\"，\"周三\"，\"周四\"，\"周五\"，\"周六\"]，

dayNamesShort：[\"周日\"，\"周一\"，\"周二\"，\"周三\"，\"周四\"，\"周五\"，\"周六\"]，

today：[\"今天\"]，

firstDay：1，

buttonText：{today：'今天'，month：'月'，week：'周'，day：'日'，prev：'上一個月'，next：'下一個月'}，

……//由于代碼較多，此處省略一些其它設(shè)置項，可以參考說明文檔

}）；

1.2 使用Json讀取后臺數(shù)據(jù)

這是FullCalendar的一個重要使用方法，如果只是一個簡單的日歷及固定信息顯示，在實現(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ù)的交互。將以下代碼加入到前面初始化代碼中：

viewDisplay：function（view）{

$.getJSON（\"jsondemo.aspx？id=\"+pid+\"xh=\"+xh+\"random=\"+Math.random（），function（result）{//不加random時，只第一次顯示執(zhí)行

for（vari=0；i

varobj=newObject（）；

obj.id=result[i].id；

obj.title=result[i].title；

obj.start=result[i].start；

obj.end=result[i].end；

$（\"#calendar\"）.fullCalendar（'renderEvent'，obj，true）；

}

}）；

}，

以上代碼中主要使用了$.getJSON（）方法來從后臺讀取數(shù)據(jù)，使用它的好處是它可以跨域訪問讀取數(shù)據(jù)，當(dāng)然如果不需要跨域可以使用$.Post（）來實現(xiàn)。在上面代碼中jsondemo.aspx就是給出JSON數(shù)據(jù)的后臺代碼文件，當(dāng)然這里給后臺傳遞了二個參數(shù)分別是ID和XH。后臺組織好的數(shù)據(jù)返回后保存在result中，通過循環(huán)操作，根據(jù)開始與結(jié)束時間分別顯示在日歷中，其中$（\"#calendar\"）.fullCalendar（'renderEvent'，obj，true）；是關(guān)鍵，主要功能是重新顯示日歷中的信息。

1.3 組織后臺數(shù)據(jù)

在前面代碼中jsondemo.aspx文件是JSON數(shù)據(jù)的提供者，那這個文件中主要實現(xiàn)了些什么？下面代碼就是主要的實現(xiàn)：

protectedvoidPage_Load（objectsender，EventArgse）

{

if（（Request[\"id\"]！=1）（Request[\"xh\"]！=1））

{

Response.Clear（）；Response.Write（DataTable2Json（Request[\"id\"].ToString（），Request[\"xh\"].ToString（）））；

Response.End（）；

}

}

publicstringDataTable2Json（stringid，stringxh）

{

DataTabledt=edsoft.DBUtility.DbHelperMySQL.Query（\"select*fromPracticeQd\"）.Tables[0]；

StringBuilderjsonBuilder=newStringBuilder（）；

jsonBuilder.Append（\"[\"）；；

foreach（DataRowitem_mainindt.Rows）

{

stringidtext=Convert.ToDateTime（item_main[\"starttime\"]）.ToString（\"yyyyMMdd\"）；

jsonBuilder.Append（\"{＼\"id＼\"：＼\"\"+idtext+\"＼\"，\"）；

jsonBuilder.Append（\"＼\"title＼\"：＼\"\"+item_main[\"memo\"].ToString（）+\"＼\"，\"）；

jsonBuilder.Append（\"＼\"start＼\"：＼\"\"+item_main[\"starttime\"].ToString（）+\"＼\"，\"）；

jsonBuilder.Append（\"＼\"end＼\"：＼\"\"+item_main[\"endtime\"].ToString（）+\"＼\"}，\"）；

}

jsonBuilder.Remove（jsonBuilder.Length-1，1）；

jsonBuilder.Append（\"]\"）；

returnjsonBuilder.ToString（）；

}

2 總結(jié)

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

參考文獻：

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

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