一、基本配置
注:此处 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