变量更改后更新日历中的事件 - 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 无法重新获取任何内容，因为您没有为其提供获取来源。如果你想重新获取工作，那么你需要提供一个动态事件源。您可以使用两种技术来做到这一点，这两种技术在文档中都有详细描述：

Events as a JSON feed - 您只需指定一个 URL 即可直接 return JSON 事件数据。 fullCalendar 将在日期更改时调用此 URL - 或者每当您调用 refetchEvents - 并将日历的当前开始和结束日期作为查询参数传递，因此服务器可以 return 正确过滤的事件列表按日期。
Events as a function - 您提供一个回调函数，fullCalendar 将在日期更改时调用该回调函数 - 或者每当您调用 refetchEvents - 并将当前开始和结束日期作为参数传递给该函数.然后该函数可以做任何你想做的事情来获取事件——例如进行自定义 AJAX 调用，或调用另一个函数或其他任何函数。当事件准备就绪时，您使用作为参数提供给主回调的“successCallback”函数将它们传回 fullCalendar。文档中有一个示例。

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

Update events in calendar after change in variable - Fullcalendar

javascript

vue.js

fullcalendar

fullcalendar-5