Fullcalendar refetchEvents 并不总是使用更新的数据重新渲染 ui

Question

我遇到了日历用户界面在事件编辑/删除时未刷新的问题。我有一个自定义模式，它允许我编辑/删除事件，保存后，数据会更新到数据库，并且有一个对 calendar.refetchEvents() 方法的回调。事件是通过 ajax 调用获取的，即事件（作为函数）。我看到数据库中的数据已更新，并且ajax请求返回更新后的数据， 但问题是日历 Ui 并不总是刷新。它有时有效，有时无效。我的意思是，用户界面有时会显示更新的数据，我必须关闭全日历视图（在我的例子中是模式视图）并再次重新打开才能看到更改。下面粘贴我的代码。这是文档中提到的相同代码。

let initCalendar = function () {
            calendar = new FullCalendar.Calendar(calendarElement, {
                initialView: 'timeGridDay',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'timeGridDay,timeGridWeek,dayGridMonth'
                },
                themeSystem: 'standard',
                allDaySlot: false,
                contentHeight: 'auto',
                weekends: true,
                editable: false,
                defaultTimedEventDuration: '00:15:00',
                slotEventOverlap: false,
                eventMinHeight: 30,
                buttonText: {
                    today: 'Today',
                    day: 'Daily',
                    week: 'Weekly',
                    month: 'Monthly'
                },
                events: function (fetchInfo, successCallback, failureCallback) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json",
                        data: JSON.stringify({
                            startDate: fetchInfo.startStr,
                            endDate: fetchInfo.endStr,
                            id: id
                        }),
                        url: dataUrl,
                        dataType: "json",
                        success: function (data) {
                            if (data && data.$values) {
                                let events = [];
                                $(data.$values).each(function (index, value) {
                                    let endDate = new Date(value.EndDate);
                                    let startDate = new Date(value.NewsDate);
                                    let trueEndDate = endDate.getTime();
                                    endDate = Math.floor((endDate.getTime() - startDate.getTime()) / 60000) > 15 ? endDate : null
                                    events.push({
                                        start: new Date(value.NewsDate),
                                        end: endDate,
                                        title: value.Title,
                                        trueTitle: value.Title,
                                        titleEncoded: value.TitleEncoded,
                                        trueEnd: trueEndDate,
                                        patientId: value.PatientID,
                                        patientNewsId: value.PatientNewsID,
                                        description: value.Description,
                                        outcome: value.OutCome,
                                        fullName: value.FullName,
                                        fullNameEncoded: value.FullNameEncoded,
                                        eventType: value.EventType,
                                        newsType: value.NewsType,
                                        inviteeListEncoded: value.InviteeListEncoded,
                                        inviteeListEncodedShortened: value.InviteeListEncodedShortened,
                                        createdByEncoded: value.CreatedByEncoded,
                                        viewMode: value.ViewMode,
                                        canBeDeleted: value.CanBeDeleted,
                                        canBeEdited: value.CanBeEdited,
                                        durationValue: value.Duration,
                                        display: "block",
                                    });
                                });
                                successCallback(events);
                            }
                        },
                        error: function () {
                            failureCallback()
                        }
                    });
                },

                eventContent: function (info) {
                    let eventHtml = getEventHtml(info);
                    return { html: eventHtml }
                },

                eventDidMount: function (info) {
                    //Custom logic here
                },
                eventClick: function (info) {
                    //Custom method call
                },
                windowResize: function (arg) {
                    this.updateSize();
                }
            });
            calendar.render();
        };

编辑/删除成功回调是一个调用

calendar.refetchEvents()

的函数。我试过了

calendar.render()

相反，但这也不会使用更新的数据刷新用户界面。谁能建议我做错了什么？

谢谢

Answer 1

我们在应用程序中也面临同样的问题，即编辑或删除任何事件后 UI 没有刷新。我们可以看到 API 调用已成功调用，获取了最新数据，但直到我们刷新 UI 后才会刷新。