vue中使用 @fullcalendar/vue 跳转到指定月的月视图

在 Vue 中使用 @fullcalendar/vue 来跳转到指定月份的月视图，您可以通过更改 FullCalendar 组件的 props 来实现。下面是一个示例代码，展示了如何在 Vue 组件中进行设置：首先，确保已经安装了 @fullcalendar/vue 和所需的 FullCalendar 插件（例如 @fullcalendar/daygrid）：

js 复制代码

    npm install @fullcalendar/vue @fullcalendar/daygrid

接下来，在 Vue 组件中，使用 @fullcalendar/vue 来渲染 FullCalendar。在模板中可以使用 FullCalendar 组件，并将所需的 options 和 eventSource 通过 props 传递：

js 复制代码

<template>
  <div>
    <button @click="jumpToMonth">跳转到月视图</button>
    <FullCalendar :options="calendarOptions" :events="eventSource" ref="fullCalendar" />
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';

export default {
  components: {
    FullCalendar,
  },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin],
        initialView: 'dayGridMonth',
      },
      eventSource: [
        // 设置日历的事件数据
        // ...
      ],
      calendarRef: null,
    };
  },
  mounted() {
    this.calendarRef = this.$refs.fullCalendar.getApi();
  },
  methods: {
    jumpToMonth() {
      const year = 2023; // 要跳转的目标年份
      const month = 8; // 要跳转的目标月份（从0开始计数，0表示一月）

      if (this.calendarRef) {
        this.calendarRef.gotoDate(`${year}-${month.toString().padStart(2, '0')}-01`);
      }
    },
  },
};
</script>

在这个示例中，我们首先使用 import 导入 @fullcalendar/vue 组件和所需的插件（例如 dayGridPlugin）。

然后，在组件的 data 部分，我们定义了 calendarOptions 对象，用于配置 FullCalendar 的选项，例如设置插件、初始化视图等。并使用 eventSource 数组来提供日历的事件数据。

在 mounted 钩子函数中，我们获取了 FullCalendar 实例的引用，并将其保存在 calendarRef 变量中，以便后续调用。

在 jumpToMonth 方法中，我们使用 this.calendarRef 的 gotoDate 方法，将目标年份和月份作为参数传入。请注意，在日期字符串中，月份需要进行零填充（例如 '08'）以保持两位数的格式。FullCalendar 将自动跳转到指定年月的月视图。

最后，在模板中，我们使用 FullCalendar 组件，并将 options 和 events 作为 props 传递给组件。我们还添加了一个按钮，当用户点击时，会触发 jumpToMonth 方法，实现跳转到指定月份的月视图。

以上就是在 Vue 中使用 @fullcalendar/vue 实现跳转到指定月份的月视图的示例代码。根据您的需求，您可以自行调整代码，并参考 FullCalendar 的文档进行进一步的功能定制。

参考链接

vue中使用 @fullcalendar/vue 跳转到指定 月的月视图

vue中使用 @fullcalendar/vue 跳转到指定月的月视图