一、基本配置

注：此处 fullcalendar版本为1.6.0

$('#calendar').fullCalendar({

header: {

left: 'prev,next', // 翻页按钮的位置

center: 'title',

right: ''

},

firstDay: 0,

editable: false,

timeFormat: 'H:mm',

axisFormat: 'H:mm',

events: function (start, end, callback) {

let params = {

"year": end.getFullYear(),

"month": end.getMonth()

};

if (end.getMonth() === 0) {

// 调试的时候发现当end日期在12月份时，获取的年份为下一年，月份为0

// 因此做如下特殊处理

params = {

"year": end.getFullYear() - 1,

"month": 12

};

}

api.ListCalendarEvents(params).then((res) => {

let tempData = [];

res.result.forEach(item => {

if (item.items.length > 0) {

item.items.forEach(m => {

tempData.push({

title: m.time + ' ' + m.companyName,

start: new Date(item.date + ' ' + m.time)

})

});

}

callback(tempData)

});

}

});

其中events配置项的内容为根据年份月份从后台获取日历上添加的事件列表，从而渲染到日历上。每次点击上一月或下一月按钮时fullcalendar会自动执行此函数加载当月的事件列表。

二、效果图

三、踩坑

1.在网上查到的文档里，events属性有三种配置方法，分别是数组(array)，json源对象( json feed)，方法(function)，这里选用的是第三种方式。此方法携带参数根据版本不同而有所区别。

文档中的events是这样配置的：function( start, end, timezone, callback ) { }

楼主本地按照此方式调试后报错：Uncaught TypeError: callback is not a function

再次经过查询，楼主的1.6版本中没有timezone参数，去掉该参数即可正确运行。

四、延伸

如果要为上月/下月按钮添加其他点击事件，可用通过以下方式

// 上月按钮

let prevBtn = document.querySelector('#calendar .fc-button-prev');

// 下月按钮

let nextBtn = document.querySelector('#calendar .fc-button-next');

$(prevBtn).on('click', () => {

// todo something

});

注：按钮类名根据版本不同存在差异，已知的有V2.2是fc-prev-button和V1.5是fc-button-prev，具体可在网页源码中检查该元素获取类名。

五、参考文档

【最新FullCalendar中文文档】https://www.helloweba.net/javascript/445.html

【FullCalendar中文文档：Event日程事件】https://www.helloweba.net/javascript/454.html#fc-loading