更改变量后更新日历中的事件 - Fullcalendar

Question

将 Fullcalendar 与 Vue.js 结合使用，我从变量传递初始事件，但我需要在更新此变量后，日历中的事件也会更新。 documentation 似乎对此很清楚：

但我已经尝试过了，但没有任何反应，事件保持为第一次渲染。
此外，我查看了许多关于此主题的 SO 相关答案，但其中大多数都与 JQuery 一起应用，这不是我的情况。
我不知道如何以正确的方式应用它。
提前感谢您的关注...

我创建日历的代码：

<FullCalendar :options="calendarOptions" ref="fullCalendar"/>

data() {
    return {
      calendarOptions: {
        firstDay: new Date().getDay(),
        plugins: [timeGridPlugin, interactionPlugin],
        headerToolbar: {
          left: '',
          center: 'title',
          right: 'prev,next'
        },
        initialView: 'timeGridWeek',
        slotMinTime: "09:00:00",
        slotMaxTime: "20:00:00",
        height: "1070px",
        expandRows: true ,
        dayHeaderFormat: { weekday: 'narrow', day: 'numeric' },
        events: displayEvents
      },
      ...

更新变量的函数：

getEvents() {
    this.displayEvents = [
        {
                id: 1,
                title: "TEST1",
                start: "2021-03-29 09:00:00",
                end: "2021-03-29 11:00:00",
                backgroundColor: "#FF5733"
        },
        {
                id: 2,
                title: "TEST2",
                start: "2021-03-29 10:00:00",
                end: "2021-03-29 11:05:00",
                backgroundColor: "#0053B8"
        },
    ]
    let calendarApi = this.$refs.fullCalendar.getApi()
    calendarApi('refetchEvents')
    this.$refs.fullCalendar('refetchEvents')
}

（displayEvents来自另一个javascript文件utils.js，执行函数后修改）

更新： 我发现我以不正确的方式调用了.fullCalendar('refetchEvents') 方法。现在我称它为：

let calendarApi = this.$refs.fullCalendar.getApi()
calendarApi.refetchEvents()

但在此之后，这些更改仍然没有反映在日历中。

Answer 1

您的事件不会更新，因为您使用的是静态事件源 - 该数组在初始化时已复制到 fullCalendar。对其进行更新对日历没有影响，因为 fullCalendar 使用的是不同的、较旧的数组副本。

并且 fullCalendar 无法重新获取任何内容，因为您没有为其提供获取来源。如果您想重新获取工作，那么您需要提供一个动态事件源。您可以使用两种技术来做到这一点，这两种技术都在文档中进行了详细描述：

1. Events as a JSON feed - 您只需指定一个将直接返回 JSON 事件数据的 URL。 fullCalendar 将在日期更改时调用此 URL - 或每当您调用 refetchEvents - 并将日历的当前开始和结束日期作为查询参数传递，因此服务器可以返回按日期正确过滤的事件列表。

2. Events as a function - 您提供一个回调函数，fullCalendar 将在日期更改时调用 - 或在您调用 refetchEvents 时调用 - 并将当前开始和结束日期作为参数传递给函数。然后该函数可以做任何你想做的事情以获取事件 - 例如。进行自定义 AJAX 调用，或调用另一个函数或其他什么。当事件准备好后，您可以使用作为参数提供给主回调的“successCallback”函数将它们传递回 fullCalendar。文档中有一个示例。