專案中需要用到日曆外掛，在進行一番比較之後選擇了FullCalendar，但是看官方文件的過程中發現文件寫得不是很友好（也可能是國人跟老外的思維方式不同，哈哈哈...），所以花了不少時間來完成自己想要的功能。FullCalendar請自行安裝，專案中涉及的功能如下：

1. 從後臺獲取資料並按資料狀態顯示不同背景顏色

關鍵點：將ajax請求插入calendar 的初始化程式碼中，將返回的資料轉化為日曆所需要的資料格式

FullCalendar 自帶的資料渲染方式包括陣列、json格式、function，這裡只需要設定渲染方式為function即可。

_InitCalendar () {
  var containerEl = $('#calendar')
  // 儲存this指標
  var _this = this
  // 渲染日曆
  containerEl.fullCalendar({
    header: false, // 不顯示頭部
    contentHeight: 500, // 設定內容高度
    locale: 'zh-cn', // 語言
    editable: true, // 可編輯
    eventLimit: true, // allow "more" link when too many events
    // 使用function動態獲取資料，start為開始時間，end為結束時間，這個不需要我們來設定，日曆自動獲取
    events: function (start, end, timezone, callback) {
      let from = _this.GmtToStr(start._d)
      let to = _this.GmtToStr(end._d)
      console.log('ajax get from:' + from + ' to:' + to)
      // 這裡是ajax請求，替換為你正在使用的ajax方式就可以
      _this.apiGet('/tp_laoren/php/index.php/admin/laoren/status/1/record?from=' + from + '&to=' + to)
        .then((res) => {
          let events = []
          if (res.errcode == 0) {
            for (let item in res.data) {
              // 資料處理，將返回的資料新增到events中
              events.push({
                // 標題，即你想展示的內容
                title: _this.GetMoneyByCount(res.data[item].count),
                start: res.data[item].date,
                // 自行定義函式，根據status欄位返回邊框顏色
                color: _this.GetColorByStatus(res.data[item].status),
                // 同上，這裡是背景顏色
                backgroundColor: _this.GetColorByStatus(res.data[item].status)
              })
            }
            // 雖然不知道這個回撥的具體內容是什麼，但它可以將剛剛獲取到的events資料渲染到日曆中
            callback(events)
          } else {
            console.log('獲取資訊失敗！')
          }
        }, (err) => {
          console.log(err)
        })
    },
    // 點選某一天響應事件
    dayClick: function (date, jsEvent, view, resourceObj) {
      _this.showModalConsumeLog = true
      // 獲取當前點選的日期
      _this.nowDate = date.format()
    }
  })
}
 

2. 按月份查詢，重新渲染日曆內容

關鍵點：選擇月份後，日曆跳轉到相關月份，重新獲取資料渲染日曆顯示結果

先獲取使用者選擇的時間值，通常包含年份和月份。然後對FullCalendar 進行日期跳轉動作，跳轉後日歷會自行重新整理。

ChangeDate () {
  // 此處time的值為使用者選擇的時間
  let time = this.year + '-' + this.month + '-1'
  // 將該時間轉化為一個Date型別
  let date = new Date(time)
  // fullCalendar日期跳轉，跳轉後會自動重新整理
  $('#calendar').fullCalendar('gotoDate', date)
}
 

3. 相關bug，gotoDate 無效

被這個問題困擾了兩個小時，一開始我使用的日曆跳轉時間方式不是按上面所說的方式進行的，而是按照以下“FullCalendar 中文文件”中介紹的方式：

// year和month為使用者選擇的時間
$('#calendar').fullCalendar('gotoDate', year, month)

結果發現日期跳轉總是出錯，第一下操作顯示跳轉到2018-3-26 號，第二下操作就直接跳到了1970-1-1。一直在研究跳轉為什麼會出錯，直到終於找不到任何原因後才開始嘗試“官方文件”的日期跳轉方式，然後bug就消失了！消失了！！

4. 關於FullCalendar 日期顯示

該外掛中日曆顯示內容包含六行（六個周），每週七天，總共42天。不論跳到哪一個月，顯示的天數都是42天。也就是說，實際上跳到每個月的任意一天，日曆顯示的內容都是一樣的，不過是使用getDate 獲取到的值不一樣而已。所以使用者選擇某年某月的時候是可以使用gotoDate 方法跳轉到所選月份的任意一天的。