GBin1教程jQuery插件实战之Fullcalendar

jQuery插件实战之fullcalendar

开发一个完整功能的富客户端会议室预定系统生成日历主界面：

以上代码将在id=calendar的div里生成一个日历，其中theme定义使用jQueryUI 来生成界面，events主要定义生成的日历项目，这里我们使用如下代码生成日历项，在实际开发过程中，我们可以在这里调用后台程序，或者使用其它方法生成数据，这里为了简单演示，我们使用js来生成需要的日历项目，代码如下：

以上代码将生成一些日历项目，显示在日历中。

接下来是fullcalendar的几个方法，用来设置日历项的显示，分别是eventRender, eventAfterRender,这里几个方法可以用来生成日历项的内容，具体如下：

以上定义了相关日历项显示方式，下面介绍日历项拖动和调整大小，代码片段如下：

以上代码如果需要详细说明，请大家参考官方文档，代码细节这里不再说明。大家可以使用下面的演示代码运行一下。

在线演示在线调试

相关资料：/fullcalendar/docs/

文章来源：jQuery插件实战之Fullcalendar - 开发一个完整功能的富客户端会议室预定系统前台

作者：Terry li -

jQuery的插件非常多，应用的场景也非常丰富，今天我这里给大家介绍一款非常实用的日历页面开发插件 - fullcalendar，目前最新版本是1.5.1，使用这款插件能够快速帮助你快速编程实现基于web的日历查看功能，大家可能都使用过outlook的日历项功能，能方便的查看待办事项或者约会。开发过程快速方便。文档也非常全。

在过去开发中，我曾经使用这个插件开发了公司内部的会议室预定系统，这里我简单的介绍一下fullcalendar的相关开发，并且实例讲解一下如何使用这个插件开发日历，其中会使用到fullcalendar里相关的高级功能，例如，拖拽修改时间，生成个性化的日历项内容。以上代码都是实际项目中使用的前台，大家如果需要可以直接修改使用。

上代码都是实际项目中使用的前台，大家如果需要可以直接修改使用。

项目需求：

1. 需要在fullcalendar的原有界面上美化，这里我们使用jQueryUI来实现界面美化，因为fullcalendar可以很好的和jQueryUI无缝整合

2. 生成单独的日历项添加和查看功能，这里仍旧使用jQueryUI的dialog来实现

3. 因为是一个实际项目，需要数据验证，所以这里我们使用formVaildator插件实现

4. 添加一个 "转到某日"功能，这个界面功能在Fullcalendar里没有，我们可以通过编程添加类似一个功能，其中调用了datepicker的一个addon，后面会介绍到

5. 周和日浏览可以自由的支持拖拽和移动，用来修改日期和时间

6. 浏览器支持： IE8和Firefox

jQuery相关插件：

1. fullcalendar

提供Calendar功能

2. formValidator

提供输入验证功能

3. Timepicker Addon for jQuery UI Datepicker

提供datepicker时间选择功能

导入相关jQuery插件类库，如下：

生成日历主界面：

以上代码将在id=calendar的div里生成一个日历，其中theme定义使用jQueryUI来生成界面，events主要定义生成的日历项目，这里我们使用如下代码生成日历项，在实际开发过程中，我们可以在这里调用后台程序，或者使用其它方法生成数据，这里为了简单演示，我们使用js来生成需要的日历项目，代码如下：

以上代码将生成一些日历项目，显示在日历中。

接下来是fullcalendar的几个方法，用来设置日历项的显示，分别是eventRender, eventAfterRender,这里几个方法可以用来生成日历项的内容，具体如下：

以上定义了相关日历项显示方式，下面介绍日历项拖动和调整大小，代码片段如下：

以上代码如果需要详细说明，请大家参考官方文档，代码细节这里不再说明。大家可以使用下面的演示代码运行一下。或者使用一下jsfiddle在线调试工具自己尝试运行调试。

在线演示在线调试

相关资料：/fullcalendar/docs/

文章来源：jQuery插件实战之Fullcalendar - 开发一个完整功能的富客户端会议室预定系统前台