背景

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

1、每天的事件有多個類型，不同類型的事件使用不同背景色標(biāo)注，展示為某個類型事件的統(tǒng)計，比如： 會議（6）

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

3、點擊某類型事件可以查詢當(dāng)天該類型事件列表。

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

分析

經(jīng)過以上需求明確接下來需要用到的知識點：

* JQuery FullCalendar v3.10.0

* day 點擊事件

* event 事件的點擊事件

* week 周點擊事件

* 不同類型的事件數(shù)據(jù)來源不同，需要使用多數(shù)據(jù)源

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

實現(xiàn)

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, // 默認(rèn)為true，顯示月視圖非本月日期eventLimit: 3,?? //每日事件展示上限eventLimitText: '更多>>', //多余事件描述buttonIcons: false,? //控制界面圖標(biāo)，false的時候，上月、下月才會顯示為中文否則為圖標(biāo)height: window.innerHeight-30,? //控制高度windowResize: function (view) {? //控制界面隨窗口拖動自適應(yīng)$('#calendar').fullCalendar('option','height',window.innerHeight-30);},weekNumbers:true,? //周顯示開關(guān)navLinks: true,? //日點擊開關(guān)navLinkDayClick: function ( date, jsEvent) { ? // 這里進行日點擊事件處理，Ajax請求，date格式化后為當(dāng)日},navLinkWeekClick: function ( weekStart, jsEvent ) { // 這里進行周點擊事件處理，Ajax請求，weekStart格式化后為當(dāng)周的開始日即周一，想要周日自己加6天就好了}, ? // 多數(shù)據(jù)源節(jié)點，這個節(jié)點文檔沒有解釋的很清晰，稍微理解一會才搞清楚結(jié)構(gòu)eventSources: [{ events: function (start, end, timezone, callback) {? // 某一種類型事件，這里通過ajax請求獲取后臺數(shù)據(jù)將數(shù)據(jù)放到對應(yīng)的事件里面 let events = []; // 定義一個數(shù)組準(zhǔn)備接收事件

???????? angular.forEach(data.resultList,function (item) {??? // 循環(huán)從后臺接收的數(shù)據(jù)

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

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

},color: '#6CA0E0' // 該類型數(shù)據(jù)的事件背景色},{events: function (start, end, timezone, callback) {// 某一種類型事件，這里通過ajax請求獲取后臺數(shù)據(jù)將數(shù)據(jù)放到對應(yīng)的事件里面 ? // 處理同上，這里可以無限添加數(shù)據(jù)源},color: '#C4D79B'} ], eventClick: function(calEvent, jsEvent, view) {? // 事件點擊 // calEvent可以獲取被點擊事件里面的屬性，比如：calEvent.stage(上面標(biāo)黃屬性)就能取到當(dāng)前事件的屬性值。 $(this).css('border-color', 'red'); //點擊后改變被點擊事件邊框顏色 }, eventTextColor:'#000000' // 事件文字顏色 });

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

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

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

全國人民舉國歡慶 。。。

轉(zhuǎn)載于:https://www.cnblogs.com/laramia/p/10731072.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。