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="js/jquery-ui-1.8.6.custom.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>

<link rel="stylesheet" href="css/redmond/jquery-ui-1.8.1.custom.css"> 

<!-- Jquery and Jquery UI -->

<script src="js/formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>

<script src="js/formValidator/js/jquery.validationEngine-en.js" type="text/javascript"></script>

<link rel="stylesheet" href="js/formValidator/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />

<!-- FullCalender -->

<link rel=\'stylesheet\' type=\'text/css\' href="js/fullcal/css/fullcalendar.css" />
<script type=\'text/javascript\' src="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显示日历项的内容
 },
  ...

接下来是fullcalendar的几个方法，用来设置会议室预定系统日历项的显示，各自是eventRender, eventAfterRender,这里几个方法能够用来生成日历项的内容，详细例如以下：

  eventRender: function(event, element) {
            var fstart  = $.fullCalendar.formatDate(event.start, "HH:mm");
          var fend  = $.fullCalendar.formatDate(event.end, "HH:mm");  
          // Bug in IE8
          //element.html(\'<a href=#>\' + fstart + "-" +  fend + \'<div style=color:#E5E5E5>\' +  event.title + "</div></a>");
          },
          eventAfterRender : function(event, element, view) {
            var fstart  = $.fullCalendar.formatDate(event.start, "HH:mm");
          var fend  = $.fullCalendar.formatDate(event.end, "HH:mm");    
          //element.html(\'<a href=#><div>Time: \' + fstart + "-" +  fend + \'</div><div>Room:\' + event.confname + \'</div><div style=color:#E5E5E5>Host:\' +  event.fullname + "</div></a>");
          var confbg=\'\';
          if(event.confid==1){
            confbg = confbg + \'<span class="fc-event-bg"></span>\';
          }else if(event.confid==2){
            confbg = confbg + \'<span class="fc-event-bg"></span>\';
          }else if(event.confid==3){
            confbg = confbg + \'<span class="fc-event-bg"></span>\';
          }else if(event.confid==4){
            confbg = confbg + \'<span class="fc-event-bg"></span>\';
          }else if(event.confid==5){
            confbg = confbg + \'<span class="fc-event-bg"></span>\';
          }else if(event.confid==6){
            confbg = confbg + \'<span class="fc-event-bg"></span>\';
          }else{
            confbg = confbg + \'<span class="fc-event-bg"></span>\';
          }
          var titlebg =  \'<span class="fc-event-conf" style="background:\'+  event.confcolor +\'">\' + event.confshortname + \'</span>\';
          if(event.repweeks>0){
            titlebg = titlebg + \'<span class="fc-event-conf" style="background:#fff;top:0;right:15;color:#3974BC;font-weight:bold">R</span>\';
          }
          if(view.name=="month"){
            var evtcontent = \'<div class="fc-event-vert"><a>\';
            evtcontent = evtcontent + confbg;
            evtcontent = evtcontent + \'<span class="fc-event-titlebg">\' +  fstart + " - " +  fend + titlebg + \'</span>\';
            evtcontent = evtcontent + \'<span>Room: \' +  event.confname + \'</span>\';
            evtcontent = evtcontent + \'<span>Host: \' +  event.fullname + \'</span>\';
            evtcontent = evtcontent + \'</a><div class="ui-resizable-handle ui-resizable-e"></div></div>\';
            element.html(evtcontent);
          }else if(view.name=="agendaWeek"){
            var evtcontent = \'<a>\';
            evtcontent = evtcontent + confbg;
            evtcontent = evtcontent + \'<span class="fc-event-time">\' +  fstart + "-" +  fend + titlebg + \'</span>\';
            evtcontent = evtcontent + \'<span>\' +  event.confname + \' by \' + event.fullname + \'</span>\';
            //evtcontent = evtcontent + \'<span>\' +  event.fullname + \'</span>\';
            evtcontent = evtcontent + \'</a><span class="ui-icon ui-icon-arrowthick-2-n-s"><div class="ui-resizable-handle ui-resizable-s"></div></span>\';
            element.html(evtcontent);           
          }else if(view.name=="agendaDay"){
            var evtcontent = \'<a>\';
            evtcontent = evtcontent + confbg;
            evtcontent = evtcontent + \'<span class="fc-event-time">\' +  fstart + " - " +  fend + titlebg + \'</span>\';
            evtcontent = evtcontent + \'<span>Room: \' +  event.confname + \'</span>\';
            evtcontent = evtcontent + \'<span>Host: \' +  event.fullname + \'</span>\';
            evtcontent = evtcontent + \'<span>Topic: \' +  event.topic + \'</span>\';
            evtcontent = evtcontent + \'</a><span class="ui-icon ui-icon-arrow-2-n-s"><div class="ui-resizable-handle ui-resizable-s"></div></span>\';
            element.html(evtcontent);               
          }
          },

以上定义了相关会议室预定系统日历项显示方式，以下介绍会议室预定系统日历项拖动和调整大小，代码片段例如以下：

  eventDragStart: function( event, jsEvent, ui, view ) {
          ui.helper.draggable("option", "revert", true);
          },
          eventDragStop: function( event, jsEvent, ui, view ) {
          },
          eventDrop: function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { 
          if(1==1||2==event.uid){
            var schdata = {startdate:event.start, enddate:event.end, confid:event.confid, sid:event.sid};
            identityService.getToBeUpdatedConflictedScheduleDAO(schdata , {
              callback:function(data) { 
                if(data.length== 0){                
                  var newschdata = {sid:event.sid, startdate:event.start, enddate:event.end};             
                  identityService.updateScheduleByNewDateRange(newschdata, {
                    callback:function(data) {   
                      alert("Thanks, reservation rescheduled successfully.");
                      //window.location.reload();
                    }                         
                  });                       
                }else{
                  revertFunc();
                  alert("Sorry, reservation cannot be rescheduled.");
                }             
              }
            });
          }else{
            revertFunc();
          }
          },
          eventResizeStart:  function( event, jsEvent, ui, view ) {
          },
          eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
          if(1==1||2==event.uid){
            var schdata = {startdate:event.start, enddate:event.end, confid:event.confid, sid:event.sid};
          }else{
            revertFunc();
          }
          }

        });

以上代码假设须要具体说明，请大家參考官方文档，代码细节这里不再说明。大家能够使用以下的演示代码执行一下。Fullcalendar是一个很有用的日历插件，使用得当能够开发很复杂的功能。比如，我们这里开发的会议室预定系统。强烈推荐！