背景

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

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

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

全国人民举国欢庆 。。。