jQuery插件实战之fullcalendar（日历插件）Demo

jQuery的插件许多，应用的场景也很丰富，今天我这里给大家介绍一款很有用的日历页面开发插件 - fullcalendar，眼下最新版本号是1.5.1，使用这款插件可以高速帮助你高速编程实现基于web的日历查看功能，大家可能都使用过outlook的日历项功能，使用日历界面能更方便的查看待办事项或者约会。开发过程高速方便。插件首页的文档也很全。当然眼下仅仅有英文文档。不错插件支持多语言，这个很不错。

在过去web程序开发中，我以前使用这个插件开发了公司内部的会议室预定系统，这里我简单的介绍一下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插件类库，例如以下：

<script type="text/javascript" src="http://www.likecs.com/js/jquery-ui-1.8.6.custom.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/js/jquery-ui-timepicker-addon.js"></script> <link href="http://www.likecs.com/css/redmond/jquery-ui-1.8.1.custom.css"> <!-- Jquery and Jquery UI --> <script src="http://www.likecs.com/js/formValidator/js/jquery.validationEngine.js" type="text/javascript"></script> <script src="http://www.likecs.com/js/formValidator/js/jquery.validationEngine-en.js" type="text/javascript"></script> <link href="http://www.likecs.com/js/formValidator/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" /> <!-- FullCalender --> <link rel=\'stylesheet\' type=\'text/css\' href="http://www.likecs.com/js/fullcal/css/fullcalendar.css" /> <script type=\'text/javascript\' src="http://www.likecs.com/js/fullcal/fullcalendar.js"></script>

生成日历主界面：

$(\'#calendar\').fullCalendar({ header:{ right: \'prev,next today\', center: \'title\', left: \'month,agendaWeek,agendaDay\' }, theme: true, editable: true, allDaySlot : false, events: function(start, end , callback){ var events = []; ... callback(events); }, ...

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

var now = new Date(); for(var i=-10;i<60;i++){ var evtstart = new Date(now.getFullYear() , now.getMonth() , (now.getDate()-i), now.getHours()-5, now.getMinutes(), now.getSeconds(), now.getMilliseconds()); var evtend = new Date(now.getFullYear() , now.getMonth() , (now.getDate()-i), now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds()); events.push({ sid: 1, uid: 1, title: \'Daily Scrum meeting\', start: evtstart, end: evtend, fullname: \'terry li\', confname: \'Meeting 1\', confshortname: \'M1\', confcolor: \'#ff3f3f\', confid: \'test1\', allDay: false, topic: \'Daily Scrum meeting\', description : \'Daily Scrum meeting\', id: 1, }); }

 

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

$(\'#calendar\').fullCalendar({ ... ... dayClick: function(date, allDay, jsEvent, view) { // 定义了点击日历中日期格子的动作，这里将会调用jQueryUi的dialog生成创建新日历项的对话框 ... }, eventClick: function(event) { // 定义了点击日历项的动作，这里将会调用jQueryUi的dialog显示日历项的内容 }, ...