全日历 Vue JS 组件 - 添加事件

Question

我在 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 完整日历上创建事件的唯一方法吗？没有办法将某种事件发送到组件中吗？

Answer 1

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

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

在组件定义中，您可以使用 events 键以声明方式设置事件列表。每次，您需要 add/remove 事件只需修改作为选项对象一部分的 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' }
      ];
    }
  }
}

全日历 Vue JS 组件 - 添加事件

Full Calendar Vue JS Component - Adding Events

fullcalendar

vue.js

fullcalendar-5