将 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()
但此后更改仍未反射(reflect)在日历中。
最佳答案
您的事件不会更新,因为您使用的是静态事件源 - 该数组在初始化时被复制到 fullCalendar。对它的更新对日历没有影响,因为 fullCalendar 使用的是数组的另一个旧副本。
并且 fullCalendar 无法重新获取任何内容,因为您没有为其提供获取来源。如果你想重新获取工作,那么你需要提供一个动态事件源。您可以使用两种技术来做到这一点,这两种技术都在文档中进行了详细描述:
Events as a JSON feed - 您只需指定一个 URL 即可直接返回 JSON 事件数据。 fullCalendar 将在日期更改时调用此 URL - 或者无论何时调用 refetchEvents - 并将日历的当前开始和结束日期作为查询参数传递,因此服务器可以返回按日期正确过滤的事件列表。
Events as a function - 您提供一个回调函数,只要日期发生变化,fullCalendar 就会调用该回调函数 - 或者每当您调用 refetchEvents - 并将当前开始和结束日期作为参数传递给该函数。然后该函数可以做任何你想做的事情来获取事件——例如进行自定义 AJAX 调用,或调用另一个函数或其他任何函数。当事件准备就绪时,您使用作为参数提供给主回调的“successCallback”函数将它们传回 fullCalendar。文档中有一个示例。
关于javascript - 变量更改后更新日历中的事件 - Fullcalendar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66792785/