FullCalendar refetchEvents无法稳定刷新UI问题求助

问题描述 #

• 使用自定义模态框编辑/删除事件，保存后数据库数据已更新，回调中调用calendar.refetchEvents()方法，但UI有时不刷新，需关闭并重新打开日历视图才会显示变更
• 事件通过AJAX函数获取，数据库数据已更新且AJAX返回最新数据，但UI未同步变更，尝试改用calendar.render()也无效

调试信息 #

• 在successCallback(events);处断点验证：编辑前事件outcome为“Partially Complete”，编辑后变为“Not Complete”，AJAX返回的events数据已更新，但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) {
            //Set title attribute
            let extendedProps = info.event.extendedProps;
            let element = info.el;
            let title = extendedProps.fullName + "\n" + extendedProps.newsType + ': ' + extendedProps.trueTitle + "\n" + "Outcome: " + extendedProps.outcome + "\n";
            let hasInvitees = extendedProps.inviteeListEncoded ? true : false;
            if (hasInvitees) {
                title += "Invitees: " + extendedProps.inviteeListEncoded;
            }
            info.el.title = title;

            //Determine color
            if (extendedProps.outcome != null) {
                let eventColorCode = getEventColorCode(extendedProps.outcome);
                $(element).css('background-color', eventColorCode).css("border-color", eventColorCode);
            }

            //Hide overflown text for timeGridWeek just in case
            if (info.view.type == "timeGridWeek") {
                $(element).css("overflow", "hidden");
            }
        },
        eventClick: function (info) {
            //Custom method call
        },
        windowResize: function (arg) {
            this.updateSize();
        }
    });
    calendar.render();
};

事件HTML生成代码 #

let getEventHtml = function (info) {
    let innerText;
    let extendedProps = info.event.extendedProps;
    let startMoment = moment(info.event.start);
    let endMoment = moment(info.event.extendedProps.trueEnd);
    let timeText = startMoment.format("h:mm") + " - " + endMoment.format("h:mm") + " - " + info.event.extendedProps.trueTitle;

    if (extendedProps.viewMode == "Patient") {
        innerText = 'Created By: ' + extendedProps.createdByEncoded + ' ' + extendedProps.newsType + ': ' + extendedProps.titleEncoded;
    } else {
        innerText = 'Patient: ' + extendedProps.fullNameEncoded + ' ' + extendedProps.newsType + ': ' + extendedProps.titleEncoded;
    }

    let titleDiv = document.createElement("div");
    titleDiv.className = "bold-text";
    titleDiv.textContent = timeText;

    let infoDiv = document.createElement("div");
    infoDiv.textContent = htmlDecode(innerText);

    return `${titleDiv.outerHTML} ${infoDiv.outerHTML}`;
};

内容的提问来源于stack exchange，提问作者Gaurav