JQuery-FullCalendar 多数据源实现日程展示

背景

本次需求：实现在一个以月为界面的日历上展示每天发生的事件。

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

这两行代码你值得拥有！以上基本上就完全解决了所有问题啦，如果有问题可以留言。

全国人民举国欢庆 。。。