Vue JS中Full Calendar组件添加事件的实现方法相关问题咨询

结论 #

Vue 版本的 FullCalendar 完全支持通过传递响应式参数的方式新增事件，调用原生 API 不是唯一的事件创建方案。

具体实现方式 #

你只需要给 FullCalendar 组件绑定响应式的 events 配置项，直接修改该数组的内容，日历会自动同步渲染对应的事件，完全符合Vue的响应式开发习惯，示例代码如下：

<template>
  <FullCalendar :options="calendarOptions" />
  <button @click="addNewEvent">新增事件</button>
</template>

<script setup>
import { ref } from 'vue'
import FullCalendar from '@fullcalendar/vue3'
// 按需引入需要的日历插件
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

// 响应式事件列表，所有修改会自动同步到日历
const eventList = ref([
  // 初始事件示例
  {
    id: '1',
    title: '初始会议',
    start: '2024-06-15',
    allDay: true
  }
])

const calendarOptions = ref({
  plugins: [dayGridPlugin, interactionPlugin],
  initialView: 'dayGridMonth',
  events: eventList.value, // 绑定响应式事件列表
  selectable: true
})

// 新增事件仅需修改响应式数组，无需调用日历原生API
const addNewEvent = () => {
  eventList.value.push({
    id: Date.now().toString(),
    title: '新创建的待办',
    start: '2024-06-20',
    end: '2024-06-21',
    allDay: false
  })
}
</script>

补充说明 #

官方示例提供的原生API调用方式仅为可选方案，适合简单的临时操作场景；响应式events属性的方案更适合需要和业务层数据做深度联动的场景，你可以根据自身开发需求选择对应的实现方式。

内容的提问来源于stack exchange，提问作者karns