背景

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

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');

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

全國人民舉國歡慶 。。。

轉載于:https://www.cnblogs.com/laramia/p/10731072.html

總結

以上是生活随笔為你收集整理的JQuery-FullCalendar 多数据源实现日程展示的全部內容，希望文章能夠幫你解決所遇到的問題。

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