使用 Grails 与 jQuery 创建 Web Calendar

核心提示： 上面代码中 FullCalendar() 方法将会初始化日历组件，并查询 JSON 数据格式的日程数据，使用 Grails 与 jQuery 创建 Web Calendar(9)，在日历界面上展现查询结果；定义 eventRender 事件 , 当鼠标移动到相关日程上时，显示日程详细信息，时间等

上面代码中 FullCalendar() 方法将会初始化日历组件，并

查询 JSON 数据格式的日程数据，在日历界面上展现查询结果；

定义 eventRender 事件 , 当鼠标移动到相关日程上时，显示日程详细信息，并提供取消该日程的按钮；

定义 loading 事件，当页面读取时显示“loading”。

使用 qTip 展示日程详细信息

为了展现详细的日程信息并提供管理按钮，本文采用了 jQuery qTip 插件。qTip 主要可配置项如下：

content:
显示的 tooltip html 内容。

position：
指定 tooltip 显示的位置，如当前位置的右上角、左下角等。

show：
如何显示 tooltip 以及其显示效果，时间等。

hide：
如何隐藏 tooltip 以及其显示效果，时间等。

style：
设置 tooltip 的显示效果如宽度、边长、css 等。

在 FullCalendar eventRender 中添加 qTip 的展示代码。如下清单所示：

清单 6. 配置并实例化 qTip

　eventRender:　function(calEvent,　element)　{　
　　element.qtip({　
　　　　content:　　
'<p><b>Description</b>:<br/>'+calEvent.description+'</p><br/>\　
　<p><b>Start</b>:<br/>'+calEvent.start+'</p><br/>\　
　<p><b>End</b>:<br/>'+calEvent.end+'</p><br/>\　
　<p><input　type="button"　onclick=\"cancelEvent('+calEvent.id+');\"\　
　value=\"Cancel\"></p>',　
　　　　position:　{　
　　　　　　corner:　{　
　　　　　　target:'rightTop',　
　　　　　　tooltip:'leftBottom'　
　　　　　　}　
　　　　},　
　　　　show:　{solo:　true},　
　　　　hide:　{　
　　　　　　delay:　800　
　　　　},　
　　　　style:　{　
　　　　　　border:{　
　　　　　　　　　　radius:　8,　
　　　　　　　　　　width:　3　
　　　　　　},　
　　　　　　padding:　'5px　15px',　//　Give　it　some　extra　padding　
　　　　　　tip:　true,　
　　　　　　name:　'cream'　//　And　style　it　with　the　preset　dark　theme　
　　　　}　
　　});　
　　return　element;　
　}