Fullcalendar在Asp.net中的应用研究

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

关键词：FullCalendar；Ajax；JSON

中图分类号：TP312.2

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

1 在中使用FullCalendar

Fullcalendar，目前最新版本是1.5.1。可以到管方网站下载开发包，其中包括一些常用的Demo。在使用FullCalendar之前，首先需要在aspx文件中添加引用，主要的引用文件如下：

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

接下来在页面中使用JavaScript脚本实现Fullcalendar的初始化，设置相应的参数，代码如下：

$（document）.ready（function（） {

var date = new Date（）；

var d = date.getDate（）；

var m = date.getMonth（）；

var y = date.getFullYear（）；

$（'#calendar'）.fullCalendar（{

editable： true，

events： [

{

title： 'All Day Event'，

start： new Date（y， m， 1）

}，

{

title： 'Long Event'，

start： new Date（y， m， d-5），

end： new Date（y， m， d-2）

}，

{

id： 999，

title： 'Repeating Event'，

start： new Date（y， m， d+4， 16， 0），

allDay： false

}，

{

title： 'Lunch'，

start： new Date（y， m， d， 12， 0），

end： new Date（y， m， d， 14， 0），

allDay： false

}，

{

title： 'Birthday Party'，

start： new Date（y， m， d+1， 19， 0），

end： new Date（y， m， d+1， 22， 30），

allDay： false

}，

{

title： 'Click for Google'，

start： new Date（y， m， 28），

end： new Date（y， m， 29），

url： 'http：///'

}

]

}）；

}）；

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