jquery之fullcalendar使用踩坑

一、基本配置

注：此处 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