背景
本次需求：實現在一個以月為界面的日歷上展示每天發生的事件。
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');這兩行代碼你值得擁有！以上基本上就完全解決了所有問題啦，如果有問題可以留言。
全國人民舉國歡慶 。。。
