如何更新Symfony中的FullCalendar事件

Question

大家好。
我在我的symfony项目(symfony + RiotJS)中使用fullcalendar。
我想动态加载事件时，我按下'上一个'或'下一个'按钮。
所以当页面被挂载时，我创建了一个新的日历，并将日历事件设置为'null'。
正如您在代码中所看到的，当我按下'prev'或'next'按钮时，我调用loadItems()函数来再次加载事件。
但是我不知道如何在loadItems()函数中更新日历的事件。如果有人知道如何修理它，我将非常感激。
我等待您的回复。
谢谢。

onMounted() {
self = this;
let calendarEl = this.$('#calendar');
this.state.calendar = new Calendar(calendarEl, {
plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek'
},
buttonText: {
today: 'Heute',
month: 'Monat',
week: 'Woche',
day: 'Tag',
},
datesSet: function() {
let view = this.currentData.dateProfile.renderRange;
let start = view.start.toISOString().substring(0, 10);
let end = view.end.toISOString().substring(0, 10);
if (start != getSearchParam('begin')) {
updateSearchParam('begin', start);
updateSearchParam('end', end);
self.loadItems();
}
},
events: this.state.events,
initialDate: getSearchParam('date', '') ? getSearchParam('date', '') : this.moment().format('Y-MM-DD'),
});
this.state.calendar.setOption('locale', 'de');
this.state.calendar.render();
updateSearchParam('date', '');
this.update();
this.loadItems();
},

这是loadItems()函数

loadItems() {
this.state.loading = true;
this.update();
if (this.state.request) {
this.state.request.abort();
}
this.state.request = this.API.get('/events', this.getParams());
this.state.request.then(response => {
this.state.items = response.data.items;
this.state.filteredItems = null;
this.state.total = response.data.total;
this.state.events = [];
response.data.items.forEach( item => {
let event = {
id: item.id,
title: item.event.name,
start: this.moment(item.begin).format('Y-MM-DD'),
end: this.moment(item.end).format('Y-MM-DD'),
backgroundColor: item.event.type.bgColor,
borderColor: '#ffffff',
textColor: this.getTextColor(item.event.type.bgColor),
};
this.state.events.push(event);
});
this.state.loading = false;
this.update();

//after I gets the events I want to update the events of calendar here
//this.state.calendar.refetchEvents();
this.update();
this.state.request = null;
});
return this.state.request;
},

Answer 1

我只是关注如何更新事件，当我按下' previous '和'next'按钮

我搜索了很多方法，有很多解决方案。例如:

• $('#calendar').fullCalendar('updateEvents', events)
• $('#calendar').fetchEvents()

但是这些方法对我的问题不起作用

最后，我找到了一个简单的方法。
这是一个setOption()方法。
正如你在上面的代码中看到的，有像'datesSet'和'events'这样的选项。
当我每次按下按钮(上，下，今天，月，周等)时，'datesSet'选项被调用。
'events'选项用于在当前日历视图中显示事件。我是这样使用setOption()方法的:

this.state.calendar.setOption('events', this.state.events);

它对我很有效。
我建议阅读我的问答的人，仔细阅读教程和文档。

Fullcalendar是一个非常好的javascript包，我们可以非常简单地使用它。