完整的日历 Vue JS 组件 - 添加事件

【问题标题】：Full Calendar Vue JS Component - Adding Events完整的日历 Vue JS 组件 - 添加事件
【发布时间】：2021-05-11 15:24:11
【问题描述】：

我正在使用带有 Vue JS 的完整日历：https://fullcalendar.io/docs/vue

我似乎找不到使用 Full Calendar Vue JS 组件添加事件的方法。我看到示例的唯一方法是获取日历的 API 并通过它创建事件。这似乎有点反 vue。

来自文档的演示：

 handleDateSelect(selectInfo) {
      let title = prompt('Please enter a new title for your event')
      let calendarApi = selectInfo.view.calendar
      calendarApi.unselect() // clear date selection
      if (title) {
        calendarApi.addEvent({
          id: createEventId(),
          title,
          start: selectInfo.startStr,
          end: selectInfo.endStr,
          allDay: selectInfo.allDay
        })
      }
    }

我想知道，通过点击日历本机 API，在 Vue JS 完整日历上创建事件的唯一方法是如上所示？有没有办法将各种事件发送到组件中？

【问题讨论】：

标签： vue.js fullcalendar fullcalendar-5

【解决方案1】：

您实际上不必回退到使用命令式实例 API。 Vue FullCalendar 组件公开了 events 作为您可以使用的选项的一部分。例如：

<template>
  <FullCalendar :options="opts" />
  <button @click="addNewEvent"></button>
</template>

在组件定义中，您可以使用events 键以声明方式设置事件列表。每次，您都需要添加/删除事件，只需修改选项对象中的 events 键即可。

export default {
  data() {
    return {
      opts: {
        plugins: [ /* Any addition plugins you need */ ],
        initialView: 'dayGridMonth',
        events: [
          { title: 'First Event', date: '2021-05-12' },
          /* Few more initial events */
        ]
      }
    }
  },
  methods: {
    addNewEvent() {
      this.opts.events = [
        ...this.opts.events,
        { title: 'Another Event', date: '2021-05-13' }
      ];
    }
  }
}

【讨论】：