FullCalendar V5版本配合VUE的使用

网上很多的FullCalendar 教程都是V4版本，尤其对于VUE的V5版本更少。

V5固定HTML样式，不要加其他属性

        <FullCalendar ref="fullCalendar" :options="calendarOptions" />

在data里写入（这里放了对于日历的定义，和点击事件等等）：

calendarOptions: {
        plugins: [ dayGridPlugin, interactionPlugin ],
        initialView: 'dayGridMonth',//初始是月份
        dateClick: this.handleDateClick,//单击日历某一天的单元格时的事件，后面的是可以动作函数
        eventClick: this.eventClick,//单击日历事件的方法定义，后面的是可以动作函数
        dayMaxEventRows: true,  // 开启日历事件过多时的折叠功能
        views: {
          timeGrid: {
            dayMaxEventRows: 6 // 当月份视图时。一天的事件多于6个时进行折叠
          }
        },
        events: [],事件源【对象数组】

        selectable: true,
        titleFormat: { // will produce something like "Tuesday, September 18, 2018"
          year: 'numeric',
          month: 'numeric',
          day: 'numeric'
          // weekday: 'long'
        },
        locale: 'zh-cn',//中文
        aspectRatio: 1.65,
        displayEventTime: true, // 是否显示时间
        headerToolbar: {
          // 日历头部按钮位置
          left: 'prevYear,prev,next,nextYear',
          center: 'title',
          right: 'dayGridMonth,dayGridWeek,today'
        },
        buttonText: {//定义了按钮的名称
          today: '今天',
          month: '月',
          week: '周',
          day: '日'
        },

        customButtons: {//定义时间按钮的方法，但是不知道为什么名称不好用
          prev: {
            text: '上月',
            click: this.handlePreBtnClick
          },
          next: { // this overrides the next button
            text: '下月',
            click: this.handleNextBtnClick
          },
          prevYear: {
            text: '上一年',
            click: this.handlePreYearBtnClick
          },
          nextYear: {
            text: '下一年',
            click: this.handleNextYearBtnClick
          }
        }
      }