jQuery外掛實戰之fullcalendar（日曆外掛）Demo
阿新 • • 發佈：2019-01-27
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相關外掛：
提供Calendar功能
提供輸入驗證功能
提供datepicker時間選擇功能
開發程式碼：
匯入相關jQuery外掛類庫，如下：
[html] view plaincopyprint?- <scripttype="text/javascript"src="js/jquery-ui-1.8.6.custom.min.js"></script>
- <scripttype="text/javascript"src="js/jquery-ui-timepicker-addon.js"></script>
- <linkrel="stylesheet"href="css/redmond/jquery-ui-1.8.1.custom.css">
- <!-- Jquery and Jquery UI -->
- <scriptsrc="js/formValidator/js/jquery.validationEngine.js"type="text/javascript"></script>
- <scriptsrc="js/formValidator/js/jquery.validationEngine-en.js"type="text/javascript"></script>
- <linkrel="stylesheet"href="js/formValidator/css/validationEngine.jquery.css"type="text/css"media="screen"charset="utf-8"/>
- <!-- FullCalender -->
- <linkrel='stylesheet'type='text/css'href="js/fullcal/css/fullcalendar.css"/>
- <scripttype='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,
- });
- }
以上程式碼將生成一些日曆專案，顯示在日曆中。
[html] view plaincopyprint?- $('#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('<ahref=#>' + fstart + "-" + fend + '<divstyle=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('<ahref=#><div>Time: ' + fstart + "-" + fend + '</div><div>Room:' + event.confname + '</div><divstyle=color:#E5E5E5>Host:' + event.fullname + "</div></a>");
- var confbg='';
- if(event.confid==1){
- confbg = confbg + '<spanclass="fc-event-bg"></span>';
- }else if(event.confid==2){
- confbg = confbg + '<spanclass="fc-event-bg"></span>';
- }else if(event.confid==3){
- confbg = confbg + '<spanclass="fc-event-bg"></span>';
- }else if(event.confid==4){
- confbg = confbg + '<spanclass="fc-event-bg"></span>';
- }else if(event.confid==5){
- confbg = confbg + '<spanclass="fc-event-bg"></span>';
- }else if(event.confid==6){
- confbg = confbg + '<spanclass="fc-event-bg"></span>';
- }else{
- confbg = confbg + '<spanclass="fc-event-bg"></span>';
- }
- var titlebg = '<span class="fc-event-conf" style="background:'+ event.confcolor +'">' + event.confshortname + '</span>';
- if(event.repweeks>0){
- titlebg = titlebg + '<spanclass="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 + '<spanclass="fc-event-titlebg">' + fstart + " - " + fend + titlebg + '</span>';
- evtcontent = evtcontent + '<span>Room: ' + event.confname + '</span>';
- evtcontent = evtcontent + '<span>Host: ' + event.fullname + '</span>';
- evtcontent = evtcontent + '</a><divclass="ui-resizable-handle ui-resizable-e"></div></div>';
- element.html(evtcontent);
- }else if(view.name=="agendaWeek"){
- var evtcontent = '<a>';
- evtcontent = evtcontent + confbg;
- evtcontent = evtcontent + '<spanclass="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><spanclass="ui-icon ui-icon-arrowthick-2-n-s"><divclass="ui-resizable-handle ui-resizable-s"></div></span>';
- element.html(evtcontent);
- }else if(view.name=="agendaDay"){
- var evtcontent = '<a>';
- evtcontent = evtcontent + confbg;
- evtcontent = evtcontent + '<spanclass="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><spanclass="ui-icon ui-icon-arrow-2-n-s"><divclass="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是一個非常實用的日曆外掛，使用得當可以開發非常複雜的功能。例如，我們這裡開發的會議室預定系統。強烈推薦！