Fullcalendar在Aspnet中的应用研究 下载本文

Fullcalendar在Asp.net中的应用研究

摘 要:fullcalendar是一款非常优秀的日历控件,不但可以用做日历使用,更重要的提供了非常多的回调函数,开发者使用它可以方便的实现诸如会议安排、房间预定、时间安排等功能,同时允许设计人员自己修改样式,提供中文支持。 关键词:fullcalendar;ajax;json 中图分类号:tp312.2

首先,fullcalendar是款基于jquery的日历插件,它运用ajax技术来读取每一个月的日历事件并能够配置成使用自己的日历事件来源,例如从google calendar获取事件。支持拖放日历中的事件,自定义点击和拖放事件。fullcalendar和jquery一样,主要是以面向对象的方式来组织代码。当然,这里所谓的面向对象仅仅是指可以把整个fullcalendar单独理解为一个类,这个类中包括有很多的属性、方法、委托(函数回调)作为成员变量。通过对这些成员变量赋值,即可实例化出一个符合自己需求的fullcalendar实例出来,即最终在浏览器里渲染出一个日历。换句话说,开发者需要做的绝大多数工作就是按照fullcalendar的语法约定去配置出一个符合我们需求的fullcalendar实例。除非对于极少的特殊需求,fullcalendar向我们提供的接口不足以满足,才会去修改fullcalendar本身的js文件。 1 在asp.net中使用fullcalendar

fullcalendar,目前最新版本是1.5.1。可以到管方网站下载开

发包,其中包括一些常用的demo。在使用fullcalendar之前,首先需要在aspx文件中添加引用,主要的引用文件如下:

如果与google日历连接,别忘记加入

最后在页面的表记中添加一个用于显示的div就可以了。代码如下:

以上代码在完成后,显示在浏览器中的效果如图1-1所示: 图1-1 fullcalendar显示效果图

通过图1-1的显示,可以方便的显示出一个日历,并且在日历的每天都可以定义并显示任务内容,当然也可以具体到某一个时间点。这里主要是在events中,设置相应的属性来实现的,比如:title代码显示的内容、start代码显示的起始日期时间、end代码结束的日期时间、url代码跳转的地址等等,还有许多属性参数可以参考说明文档中的使用说明。

如果只是一个简单的日历及固定信息显示,在实现应用时也没有太大的意义的。json作为现在网页中流行的数据交换格式,被广泛的应用,不论在jquery中还是在ajax中都可以看到它的身影。fullcalendar为了支持json数据源,所以后台增加了json数据接口。fullcalendar虽然只是一个展示的控件,但它支持一些回调操

作,因此可以利用它们来实现数据的交互。主要用到的回调函数包括:

(1)select :在点击或拖动来选择时间时触发,可以用来添加新事件。

(2)eventrender :在渲染事件时触发,可以用来给事件做一些修饰。

(3)eventdrop :移动事件时触发。 (4)eventresize :调整事件范围时触发。

还有一些有用的回调操作,可以参看 官方文档 。fullcalendar中把记录称为事件。

如果需要数据交互,可以使用jquery的post方法实现的。 2 总结

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

[1]李冠男.用google做外贸之google calendar展会管理[j].电子商务世界,2008-12-05.

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