How to update FullCalendar events in Symfony - symfony

Question

Hello, everybody. I am using fullcalendar in my symfony project(Symfony + RiotJS). I want to load the events dynamically when I press 'prev' or 'next' button. So I make a new calendar when the page is mounted and set the calendar events as 'null'. As you can see on the code, I called the loadItems() function to load the events again when I press 'prev' or 'next' button. But I can't sure how to update the events of calendar in the loadItems() function. I'd really appreciate if someone knows how to fix it. I will wait for reply.Thanks.
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();
},
And this is the loadItems() function.
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

I just focused how to update events when I press the 'prev' and 'next' button.
I searched a lot about the method and there were many solutions.
For example:
$('#calendar').fullCalendar('updateEvents', events)
$('#calendar').fetchEvents()
But these methods are not working on my problem.
Finally, I found a simple method.
It is a setOption() method.
As you can see on my above code, there are options like 'datesSet' and 'events'.
The 'datesSet' option is called everytime when I press the buttons (prev, next, today, month, week and etc).
And the 'events' option is for events to show on the current calendar view.
I used setOption() method like this.
this.state.calendar.setOption('events', this.state.events);
It worked well for me.
I suggest the people who read my question and answer, to read the tutorials and documentations carefully.
Fullcalendar is really well-built javascript package and we can use it very simply.