使用 Grails 与 jQuery 创建 Web Calendar

核心提示： 发布服务如下：服务发布 URL：http://localhost:8080/MyCalendar/calendarEvent/deletedWithJson参数：id：要取消的日程 id当服务请求完成完毕，将会返回执行结果，使用 Grails 与 jQuery 创建 Web Calendar(6

发布服务如下：

服务发布 URL：http://localhost:8080/MyCalendar/calendarEvent/deletedWithJson

参数：

id：要取消的日程 id

当服务请求完成完毕，将会返回执行结果。

定义日历用户界面

前面文章中，我们利用 Grails，快速创建了一个完整可用的 Web Calendar 程序。通过该程序，用户可以管理查看日程。但是该程序采用了传统的方式展示和管理页面，并没有使用 Ajax 等技术，对于 Web 2.0 时代的 Web 应用程序来说，用户体验并不友好。本文将使用 jQuery 及其插件对程序前端进行改造，为用户提供全新的直观友好的界面，以提高程序的可用性和用户体验。

添加 listAsCalendar 方法到 CalendarEventController.groovy，内容为空。在 grails-app\views\calendarEvent 目录下创建 listAsCalendar.gsp 页面（建议拷贝同目录下 show.gsp，在该页面基础上修改）。

定义日历界面显示 div 位置
添加 <div id='calendar'></div>到页面中。

定义日历 loading 信息提示
添加 <div id='loading' style='display:none'>loading...</div>到页面中。

添加样式定义，确定日历与 loading 信息的位置与大小。

安装配置 jQuery 和 FullCalendar 插件

首先安装 jQuery 到 MyCalendar 项目中，运行命令 grails install-plugin jquery。运行该命令后，Grails 将会更新插件列表，并下载 plugin zip 包到 <user home>\.grails\<version>\plugins\ 下。建立并解压 plugin zip 包到目录 <user home>/.grails/<version>/projects/MyCalendar/plugins/jquery-1.3.2.4 下。自动执行 post-install 脚本，脚本将会下载 jQuery 最新 js 文件并拷贝到 <project home>/web-app/js 目录。