Fullcalender使用历程及总结

1.设置日历表按钮文字，且风格对应中文

 var calendar = new Calendar(calendarEl, {
        events: function (date, callback, falsecallback) {},
        theme: true,
        isRTL: false,
        firstDay: 0,
        droppable: true,
        contentHeight: "5rem",
        height: "80",
        customButtons: {
          myCustomButton: {
            text: '上个月',
            click: function () {
              alert('点击了自定义按钮!');
            }
          }
        },
        buttonText: {
          prev: '上月',
          next: '下月',
          prevYear: '上年',
          nextYear: '下年',
          today: '本月',
          month: '月',
          week: '周',
          day: '日'
        },
        monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月",
          "十二月"
        ],
        dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
        header: {
          left: ' prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        editable: true,
        locale: 'zh-cn',
        eventClick: function (event, jsEvent, view, el) {},
        eventDrop: function () {},
        drop: function (date, arg) {}
        }
      });

设置的属性无非就是这些，对应的属性都可以上官网和各种网站可以找到。
但是他们都没告诉我，要设置 locale: ‘zh-cn’,要设置 locale: ‘zh-cn’,要设置 locale: ‘zh-cn’,要设置 locale: ‘zh-cn’！！！！才可以生效。

2.日历表数据源的动态更新与获取

日历点击上月下月，日历数据源需要更新。上部分代码中

        events: function (date, callback, falsecallback) {
          csh_req(date, callback, falsecallback);
        },

events代表数据源，它有三个参数，date，callback，falsecallback
date里包含当前月的开始月日和结束月日，我们拿到这个日期可以向后台请求拿到每天的历程信息。这样你翻到每个月，都会这个events都会自动触发请求并更新日程表。
一开始设想在点击上月下月按钮上添加请求来更新历程数据，但是这个办法十分不可行，不清楚为什么插件的部分方法也不能够调用，比如点击上月下月触发方法。
callback和falsecallback是指数据源请求的成功回调和失败回调，没有用到，就不讲了，用的时候文档关于events的函数式调用数据源的参数说明不是最新的，导致个人花了很长的时间才找到正确的调用方式，如上date,callvack,falsecallback。

3.日历表配合拖拽标签

日历表经常会配合拖动标签，即将历程标签拖拽到日程中，触发接口，更新后台中的数据，然后日历表重新渲染。
日历表重新渲染数据源

calendar.refetchEvents()

但是这里我个人遇到一个坑，花了漫长时间解决的。当你将拖拽标签拖到日历表中时
拖拽松开，标签附着到日历中，触发日历中的drop函数，里面写接口的请求，更新后台数据。然后使用refetcheEvents重新渲染，会导致出现一个日期里有两个标签的bug。

即使你不刷新日历表，就留一个你拖动过来的标签，那也问题不大，毕竟你后台已经保存了数据，你刷新网页，最后也也会只留一个日历渲染的标签，拖动的标签就不会再进行渲染。
但是假如你后续还进行了日历表中，日期和日期之间的标签拖拽，标签删除，都需要触发calendar.refetchEvents()，那么之前拖拽标签的地方就会刷新成两个。
我个人想到的解决方案是，先使用方法calendar.removeEventSource()再使用calendar.refetchEvents()。