Full Calendar多数据源展示异常问题求助

问题原因 #

循环发起的AJAX请求是异步执行的，每个请求成功后立即调用callback(events)，导致日历多次接收事件数据：

• 初始加载时，哪个请求先完成就先显示对应数据源的事件
• 切换视图时，请求完成顺序可能变化，导致显示不同数据源
• 切回月视图时，三个请求都完成，三次调用callback，事件被重复添加三次

解决方法 #

使用Promise.all等待所有AJAX请求完成，收集所有事件后再统一调用callback，避免重复触发和顺序问题。修改后的代码如下：

$(document).ready(function() {
    $('#calendar').fullCalendar({
        events: function(start, end, timezone, callback) {
            var objectdata = {
                where: {
                    'Datetime.DTT_EVT_start': [
                        '>', start.format() + 'T00:00:00'
                    ],
                    'Datetime.DTT_EVT_end': [
                        '<', end.format() + 'T00:00:00'
                    ]
                },
                "include": 'Datetime.*'
            };

            const cals = [
                'https://feed1.org/wp-json/v4.8.29/events',
                'https://feed2.org/wp-json/v4.8.29/events',
                'https://feed3.org/wp-json/v4.8.29/events',
            ];

            // 用Promise包装每个AJAX请求，单独处理每个数据源的事件收集
            const eventPromises = cals.map(calUrl => {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: calUrl,
                        dataType: 'json',
                        data: objectdata,
                        success: function(doc) {
                            const siteEvents = [];
                            $(doc).each(function() {
                                if (this.datetimes[0]) {
                                    siteEvents.push({
                                        title: this.EVT_name,
                                        url: this.link,
                                        start: this.datetimes[0].DTT_EVT_start,
                                        end: this.datetimes[0].DTT_EVT_end
                                    });
                                }
                            });
                            resolve(siteEvents);
                        },
                        error: function(xhr, status, error) {
                            alert('error communicating with server: ' + status);
                            reject(error);
                        }
                    });
                });
            });

            // 等待所有请求完成后，合并事件并统一传递给日历
            Promise.all(eventPromises)
                .then(allEventsArrays => {
                    const allEvents = allEventsArrays.flat();
                    callback(allEvents);
                })
                .catch(error => {
                    console.error('加载事件失败:', error);
                });
        }
    });
});

修改说明 #

• 用map将每个数据源URL转换为Promise对象，单独处理对应AJAX请求的事件收集
• 借助Promise.all等待所有请求完成，确保拿到全部数据源的事件数据
• 通过flat()将多个事件数组合并为一维数组，仅调用一次callback传递所有事件，彻底解决重复显示和顺序异常问题

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