fullcalendar vue 自定义view

在FullCalendar Vue中，你可以通过自定义视图来满足特定需求。你可以使用`headerToolbar`中的按钮来切换视图，也可以通过代码来实现。如果你想通过代码来切换视图，可以使用`changeView`方法。以下是一个示例代码：

<template>
  <FullCalendar ref="myCalendar" :options="calendarOptions"></FullCalendar>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth', // 初始视图为月视图
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        }
      }
    }
  },
  methods: {
    viewChange(val) {
      const calendarApi = this.$refs.myCalendar.getApi()
      calendarApi.changeView(val)
    }
  }
}
</script>

在上述代码中，我们通过`changeView`方法来切换视图。你可以在自定义的按钮点击事件中调用`viewChange`方法，并传入相应的视图类型，例如`dayGridMonth`表示切换到月视图，`timeGridWeek`表示切换到工作周视图。这样就可以实现自定义视图的切换了。