使用 Grails 与 jQuery 创建 Web Calendar

核心提示： FullCalendar 主要的配置选项有：draggable: boolean日程项是否可拖拽，timeFormat: string日程项的日期显示格式，使用 Grails 与 jQuery 创建 Web Calendar(8)，具体参数可以参考 FullCalendar 文档（见参考资源），

FullCalendar 主要的配置选项有：

draggable: boolean
日程项是否可拖拽。

timeFormat: string
日程项的日期显示格式。具体参数可以参考 FullCalendar 文档（见参考资源）。

loading: function(isLoading)
当 FullCalendar 正在读取日程列表时，isLoading 为 true。当完成时，为 false。

eventRender: function(calEvent, element)
每个日程项被渲染的时候，都会被调用该方法。calEvent 是日程项的 javascript 数据对象，element 是一个 jQuery 元素，它是最终显示在页面上的对象。

events: array/string/function(start, end, callback)
通过 array、string 或 function 的方式设置将展示的日程项数据。如需要将以 Ajax 的方式动态获取日程，则可使用 function 来实现。本示例使用了 function 来动态获取日程数据。

示例代码清单如下：

清单 5. 配置实例化 FullCalendar

　$(document).ready(function()　{　
　　$('#calendar').fullCalendar({　
　　　　header:　{　
　　　　　　left:　'prev,next　today',　
　　　　　　center:　'title',　
　　　　　　right:　'month,agendaWeek,agendaDay'　
　　　　},　
　　　　events:　function(start,　end,　callback)　{　
　　　　　　//　do　some　asynchronous　ajax　
　　　　　　$.getJSON("listAsJson",　
　　　　　　　　{　
　　　　　　　　　　start:　start.getTime(),　
　　　　　　　　　　end:　end.getTime()　
　　　　　　　　},　
　　　　　　　　function(result)　{　
　　　　　　　　　　//reset　timezone　from　server　
　　　　　　　　　　for(var　i=0;i<result.length;　i++){　
　　　　　　　　　　　　result[i].start　=　\　
　　　　　　　　　　　　　　　　$.fullCalendar.parseISO8601(result[i].start,　false);　
　　　　　　　　　　　　result[i].end　=　\　
　　　　　　　　　　　　　　　　$.fullCalendar.parseISO8601(result[i].end,　false);　
　　　　　　　　　　}　
　　　　　　　　　　callback(result);　
　　　　　　　　});　
　　　　　　},　
　　　　　　loading:　function(bool)　{　
　　　　　　　　if　(bool)　$('#loading').show();　
　　　　　　　　else　$('#loading').hide();　
　　　　　　},　
　　　　　　eventRender:　function(calEvent,　element)　{　
　　　　　　　　…　
　　　　　　　　//render　event　details　as　Qtip　tooltip　
　　　　　　}　
　　});　
　});