我在项目中用到的vue FullCalendar的内置函数以及配置项

 <FullCalendar v-if="isLoadingSucess"
        :class="[$style.calenderDetail]" 
        :options="calendarOptions" ref="FullCalendar"/>

// 切换到下一月/周/日
this.$refs.FullCalendar.getApi().next()
// 切换到上一月/周/日
this.$refs.FullCalendar.getApi().prev()
// 跳转到今天
this.$refs.FullCalendar.getApi().today()
// 跳转到指定日期  formatData是日期 格式为 yyyy-MM-dd
// 特别注意不要写例如 2021-8-7 必须是 2021-08-07  两位!!!
this.$refs.FullCalendar.getApi().gotoDate(formatData)
// 获得当前视图起始位置的日期
this.$refs.FullCalendar.getApi().getDate()
// 获得当前视图的一些参数 比如type 是当前视图的类型
this.$refs.FullCalendar.getApi().view
// 向日历中添加事项
this.$refs.FullCalendar.getApi().view.calendar.addEvent({
  id: 1,
  title: `事项xx`,
  start: '2021-10-01' + ' 13:00:00',
  end: '2021-10-01' + ' 17:00:00',
  // 修改背景颜色
  backgroundColor:'#d8377a',
  // 修改边框颜色
  borderColor:'#d8377a',
})

data() {
    let that = this
    return {
      createEventId: 0,
      calendarOptions: {
        plugins: [dayGridPlugin,timeGridPlugin,interactionPlugin],
        // 视图类型
        initialView: 'timeGridWeek',
        // 语言选项
        locale:'zh-cn',
        // 设置各种默认按钮的文字 没使用自定义按钮 并且 不需要在按钮添加自己的代码就直接用这个改一下显示文字就行
        buttonText:{
          today:'今天',
          month:'月',
          week:'周',
          day:'日',
          list:'表'
        },
        // 自定义头部按钮 因为要加一些自己的内容   自带的按钮未找到回调函数
        customButtons:{
          prevBack: {
            text: '后退',
            click: function(data) {
              that.$refs.FullCalendar.getApi().prev()
              // 自动一些内容
            }
          },
          prevGo: {
            text: '前进',
            click: function(data) {
              that.$refs.FullCalendar.getApi().next()
              // 自动一些内容
            }
          },
          ToToday: {
            text: '今天',
            click: function(data) {
              that.$refs.FullCalendar.getApi().today()
              // 自动一些内容
            }
          },
        },
        // 头部显示的功能 自定义按钮就显示在这
        headerToolbar: {
          left: 'prevBack,prevGo ToToday',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek',
        },
        // 初始化的事件
        initialEvents: [],
        // 是否可拖拽
        // editable: true,
        // 是否可选择添加
        // selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        // 选择时触发函数
        select: this.handleDateSelect,
        // 点击事件触发函数
        eventClick: this.handleEventClick,
        // 移动到事件上触发函数
        eventMouseEnter:this.handleEventMouseover,
        // 移动事件或者拓展事件时间触发函数
        eventsSet: this.handleEvents,
        // 全天行 的文本显示内容
        allDayText: '全天',
        // 是否显示全天
        allDaySlot: true,
        // 最小时间
        slotMinTime:'06:00:00',
        // 最大时间
        slotMaxTime:'21:00:00',
      },
    }
  },