vue3 fullcalendar

在 Vue 3 中使用 FullCalendar 切换视图有多种方式，以下是其中一种方法：

1. 首先，确保已经安装了 FullCalendar 的依赖包。可以通过 npm 或 yarn 安装：

npm install @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid

或

yarn add @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid

2. 创建一个 Vue 组件，引入 FullCalendar 和所需的视图组件：

<template>
  <div>
    <FullCalendar :options="calendarOptions" />
  </div>
</template>

<script>
import { FullCalendar } from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, timeGridPlugin],
        initialView: 'dayGridMonth', // 初始视图为月视图
        views: {
          dayGridMonth: {
            buttonText: '月视图',
            type: 'dayGridMonth'
          },
          timeGridWeek: {
            buttonText: '周视图',
            type: 'timeGridWeek'
          },
          timeGridDay: {
            buttonText: '日视图',
            type: 'timeGridDay'
          }
        }
      }
    }
  }
}
</script>

在上述代码中，我们引入了 `FullCalendar`、`dayGridPlugin` 和 `timeGridPlugin`，并在 `calendarOptions` 中配置了初始视图为月视图，并定义了不同的视图选项。

3. 然后，你可以通过按钮或其他交互方式来切换视图。在模板中添加切换按钮：

<template>
  <div>
    <FullCalendar :options="calendarOptions" />
    <button @click="changeView('dayGridMonth')">月视图</button>
    <button @click="changeView('timeGridWeek')">周视图</button>
    <button @click="changeView('timeGridDay')">日视图</button>
  </div>
</template>

4. 在 Vue 组件的方法中，定义 `changeView` 方法来切换视图：

<script