基于Asp.net中Fullcalendar日历中显示数据表信息

摘 要：FullCalendar是一款非常优秀的日历控件，不但可以用做日历使用，更重要的提供了非常好的数据接口，方便开发者从后台以JSON格式读取数据后显示在日历中，而且是无刷新的，用于体验非常好。使用FullCalendar可以简单快捷的开发出会议安排系统、预约系统等。

关键词：FullCalendar；Ajax；JSON

中图分类号：TP393

首先，FullCalendar是款基于JQuery的日历插件，它运用Ajax技术来读取每一个月的日历事件并能够配置成使用自己的日历事件来源，例如从GoogleCalendar获取事件。支持拖放日历中的事件，自定义点击和拖放事件。Fullcalendar和JQuery一样，主要是以面向对象的方式来组织代码。当然，这里所谓的面向对象仅仅是指可以把整个Fullcalendar单独理解为一个类，这个类中包括有很多的属性、方法、委托（函数回调）作为成员变量。

1 FullCalendar中显示数据表中信息

1.1 初始化FullCalendar

初始化工作可以放在$（window）.load（function（）中进行，如果需要显示中文的年月日信息的话，需要进行额外的设置。主要代码如下：

$（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：'下一个月'}，

……//由于代码较多，此处省略一些其它设置项，可以参考说明文档

}）；

1.2 使用Json读取后台数据

这是FullCalendar的一个重要使用方法，如果只是一个简单的日历及固定信息显示，在实现应用时也没有太大的意义的。Json作为现在网页中流行的数据交换格式，被广泛的应用，不论在Jquery中还是在Ajax中都可以看到它的身影。FullCalendar为了支持JSON数据源，所以后台增加了JSON数据接口。FullCalendar虽然只是一个展示的控件，但它支持一些回调操作，因此可以利用它们来实现数据的交互。将以下代码加入到前面初始化代码中：

viewDisplay：function（view）{

$.getJSON（"jsondemo.aspx？id="+pid+"&&xh="+xh+"&&random="+Math.random（），function（result）{//不加random时，只第一次显示执行

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（）方法来从后台读取数据，使用它的好处是它可以跨域访问读取数据，当然如果不需要跨域可以使用$.Post（）来实现。在上面代码中jsondemo.aspx就是给出JSON数据的后台代码文件，当然这里给后台传递了二个参数分别是ID和XH。后台组织好的数据返回后保存在result中，通过循环操作，根据开始与结束时间分别显示在日历中，其中$（"#calendar"）.fullCalendar（'renderEvent'，obj，true）；是关键，主要功能是重新显示日历中的信息。

1.3 组织后台数据

在前面代码中jsondemo.aspx文件是JSON数据的提供者，那这个文件中主要实现了些什么？下面代码就是主要的实现：

protectedvoidPage_Load（objectsender，EventArgse）

{

if（（Request["id"]！=null）&&（Request["xh"]！=null））

{

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 总结

当然，FullCalendar运用领域非常广泛，从日常日历的显示到会议的预定，从人员的安排到教室的预定，都可以使用它。这里只是一个简单的讨论，本插件已经成功的运用在本人开发的多个系统中，效果非常好。

参考文献：

[1]李冠男.用Google做外贸之GoogleCalendar展会管理[J].电子商务世界，2008，12，05.

[2]黄翠银，梁玉玫.GoogleCalendar在成人学习时间管理中的应用[J].继续教育研究，2009，07，15.