vue中使用 @fullcalendar/vue 跳转到指定 月的月视图
在 Vue 中使用 @fullcalendar/vue 来跳转到指定月份的月视图，您可以通过更改 FullCalendar 组件的 props 来实现。下面是一个示例代码，展示了如何在 Vue 组件中进行设置：
首先，确保已经安装了 @fullcalendar/vue 和所需的 FullCalendar 插件（例如 @fullcalendar/daygrid）：
npm install @fullcalendar/vue @fullcalendar/daygrid
接下来，在 Vue 组件中，使用 @fullcalendar/vue 来渲染 FullCalendar。在模板中可以使用 FullCalendar 组件，并将所需的 options 和 eventSource 通过 props 传递：
<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 的文档进行进一步的功能定制。
参考链接