jquery在线教程交流jQuery插件实战之fullcalendar
开发一个完整功能的富客户端会议室预定系统生成日历主界面：
以上代码将在id=calendar的div里生成一个日历，其中theme定义使用jQueryUI 来生成界面，events主要定义生成的日历项目，这里我们使用如下代码生成日历项，在实际开发过程中，我们可以在这里调用后台程序，或者使用其它方法生成数据，这里为了简单演示，我们使用js来生成需要的日历项目，代码如下：
以上代码将生成一些日历项目，显示在日历中。
接下来是fullcalendar的几个方法，用来设置日历项的显示，分别是eventRender, eventAfterRender，这里几个方法可以用来生成日历项的内容，具体如下：
以上定义了相关日历项显示方式，下面介绍日历项拖动和调整大小，代码片段如下：
以上代码如果需要详细说明，请大家参考官方文档，代码细节这里不再说明。大家可以使用下面的演示代码运行一下。
在线演示在线调试
相关资料：arshaw/fullcalendar/docs/
文章来源：jQuery插件实战之Fullcalendar - 开发一个完整功能的富客户端会议室预定系统前台
作者：Terry li - GBin1
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插件类库，如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。