如何更新Symfony中的FullCalendar事件

Question

大家好，大家。
我在我的Symfony Project（Symfony + Riotjs）中使用FullCalendar。
我想在按“ prev”或“下一个”按钮时动态加载事件。
因此，我在安装页面时制作了一个新日历，并将日历事件设置为“ null”。
您可以在代码上看到，我调用了LoadItems（）函数以再次加载事件。 'prev'或'next'按钮。
，但我不确定如何更新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

我只是专注于如何按下“ prev”和“下一个”按钮时如何更新事件。

我搜索了很多有关方法，并且有许多解决方案。
例如：

• $（'＃galudar'）。fullcalendar（'updateEvents'，events）
• $（'＃calendar'）。fetchevents（），

但是这些方法不起作用关于我的问题。

最后，我找到了一个简单的方法。
这是setOption（）方法。
正如您在上面的代码上看到的那样，有一些选项，例如'datestet'和'events'。
当我按下按钮时，“ datesset”选项每次都调用（上一篇，下一个，今天，月，一周等）。
“事件”选项适用于事件在当前日历视图上显示。
我使用了这样的setOption（）方法。

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

它对我效果很好。
我建议那些阅读我的问答的人仔细阅读教程和文档。

FullCalendar确实是完善的JavaScript软件包，我们可以非常简单地使用它。