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是一個很有用的日歷插件，使用得當能夠開發很復雜的功能。比如，我們這里開發的會議室預定系統。強烈推薦！

轉載于:https://www.cnblogs.com/blfshiye/p/4375528.html

總結

以上是生活随笔為你收集整理的jQuery插件实战之fullcalendar（日历插件）Demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。