如何在 Symfony 中更新 FullCalendar 事件

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.