JQuery-FullCalendar 多數據源實現日程展示

背景

本次需求：實現在一個以月爲界面的日曆上展示每天發生的事件。

1、每天的事件有多個類型，不同類型的事件使用不同背景色標註，展示爲某個類型事件的統計，比如： 會議（6）

2、點擊某一天可以查詢改天所有類型事件列表。

3、點擊某類型事件可以查詢當天該類型事件列表。

4、點擊周選項可以查詢當前周所有事件。這一點只是和第2點在取日期範圍有所不同。

分析

經過以上需求明確接下來需要用到的知識點：

* JQuery FullCalendar v3.10.0

* day 點擊事件

* event 事件的點擊事件

* week 周點擊事件

* 不同類型的事件數據來源不同，需要使用多數據源

查了一下別人翻譯的中文版API ： https://www.helloweba.net/javascript/445.html，找到以上知識點，基本上就可以累代碼了。

實現

a、引用 FullCalendar插件的JS到項目裏。

b、在頁面添加引用插件的代碼。

<div id="calendar" style="width: 1000px; padding: 10px"></div>

c、在頁面的JS裏面進行calendar插件初始化

$('#calendar').fullCalendar({
    header:{
        left: 'prev day',
        center: 'title',
        right: 'next'
    },
    isRTL : false,
    showNonCurrentDates: false,                 // 默認爲true，顯示月視圖非本月日期
    eventLimit: 3,   //每日事件展示上限
    eventLimitText: '更多>>',                    //多餘事件描述
    buttonIcons: false,  //控制界面圖標，false的時候，上月、下月纔會顯示爲中文否則爲圖標
    height: window.innerHeight-30,  //控制高度
    windowResize: function (view) {  //控制界面隨窗口拖動自適應
        $('#calendar').fullCalendar('option','height',window.innerHeight-30);
    },
    weekNumbers:true,  //周顯示開關
    navLinks: true,  //日點擊開關
    navLinkDayClick: function ( date, jsEvent) {

  // 這裏進行日點擊事件處理，Ajax請求，date格式化後爲當日
    },
    navLinkWeekClick: function ( weekStart, jsEvent ) {

       // 這裏進行周點擊事件處理，Ajax請求，weekStart格式化後爲當週的開始日即週一，想要週日自己加6天就好了
    },

  // 多數據源節點，這個節點文檔沒有解釋的很清晰，稍微理解一會才搞清楚結構
    eventSources: [
    {  
        events: function (start, end, timezone, callback) {  // 某一種類型事件，這裏通過ajax請求獲取後臺數據將數據放到對應的事件裏面

         let events = []; // 定義一個數組準備接收事件

         angular.forEach(data.resultList,function (item) {    // 循環從後臺接收的數據

             // 將數據push到數組裏面
              events.push({
                  title : '會議（' + item.count + '）',
                  start : item.endDate,
                  stage : '03'
              });
          });

         // 進行事件回調，這樣事件就會生成在日程表上了
          callback(events);

 
        },
        color: '#6CA0E0' // 該類型數據的事件背景色
    },
    {
        events: function (start, end, timezone, callback) {
         // 某一種類型事件，這裏通過ajax請求獲取後臺數據將數據放到對應的事件裏面

  // 處理同上，這裏可以無限添加數據源
        },
        color: '#C4D79B'
    }
    ],
    eventClick: function(calEvent, jsEvent, view) {  // 事件點擊

     // calEvent可以獲取被點擊事件裏面的屬性，比如：calEvent.stage(上面標黃屬性)就能取到當前事件的屬性值。

     $(this).css('border-color', 'red');  //點擊後改變被點擊事件邊框顏色
    },
    eventTextColor:'#000000' // 事件文字顏色
});

d、最後還有個問題就是重載日程表上面事件，當你改變了查詢結果又希望異步刷新頁面事件時，需要先去掉所有的事件再更新事件才行。

$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('refetchEvents');

這兩行代碼你值得擁有！以上基本上就完全解決了所有問題啦，如果有問題可以留言。

全國人民舉國歡慶 。。。