使用 Grails 与 jQuery 创建 Web Calendar
2010-06-23 00:00:00 来源:WEB开发网安装 FullCalendar 和 qTip 插件。
下载 FullCalendar 的 zip 文件(见参考资源),并解压。
下载 qTip 插件 ( 见参考资料 ),并解压。
把解压所得 js 文件拷贝到 web-app\js\jquery 目录。
将 css 文件拷贝到 web-app\css 目录。
因为 Grails 采用 siteMesh( 见参考资源 ) 作为页面底层布局框架,所以可以通过修改项目的 MyCalendar\grails-app\views\layouts\main.gsp 文件将 jQuery 引用到各个页面中。因为本示例程序只在 listAsCalendar.gsp 页面使用 jQuery 及其插件,所以只需在该页面引用 jQuery 及相关资源。编辑 listAsCalendar.gsp,添加对该页面使用的 js 和 css 资源的引用。如清单 4 所示:
清单 4. 添加对 js、css 资源引用
<head>
. . .
<g:javascript src="jquery/jquery-1.3.2.min.js" />
<g:javascript src="jquery/fullcalendar.min.js" />
<g:javascript src="jquery/jquery.ui.core.js" />
<g:javascript src="jquery/jquery.ui.draggable.js" />
<g:javascript src="jquery/qtip-1.0.0-rc3.min.js" />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'fullcalendar.css')}" />
. . .
</head>
使用 FullCalendar 生成日历界面
在 jQuery 框架中,$(document).ready() 方法所定义的 function 将会在整个页面被浏览器读取完毕时调用。初始化 FullCalendar 对象的工作可以在该方法中定义。初始化 FullCalendar 将调用 $('#calendar').fullCalendar({…})函数。
更多精彩
赞助商链接