FullCalendar中calendar.getEvents()返回空数组问题求助

你遇到的核心问题是异步加载事件的时机问题，加上代码里的一个拼写错误：

直接原因 #

1. 拼写错误：代码最后一行的calendat.getEvents()是笔误，应该是calendar.getEvents()，这会直接导致控制台报错（calendat is not defined）；即使修正这个，你仍会遇到空数组问题。
2. 异步加载时序问题：events配置里的fetch是异步操作，calendar.render()执行后，API请求还未完成，事件还没被FullCalendar实例接收，此时调用getEvents()自然拿不到数据。而手动创建事件时用calendar.addEvent()是同步添加，所以能立刻获取到。

解决方案 #

方案1：使用eventsRender钩子（推荐） #

FullCalendar提供了eventsRender回调，会在所有事件渲染完成后触发，此时调用getEvents()就能拿到完整的事件列表：

let calendar = new FullCalendar.Calendar(calendarElt, {
    // 其他原有配置...
    events: function(info, successCallback, failureCallback) {
        fetch('http://green-phoenix.test/api/events')
            .then(response => response.json())
            .then(data => {
                let events = data.map(event => ({
                    id: event.id,
                    title: event.title,
                    start: event.datestr
                }));
                successCallback(events);
            })
            .catch(error => {
                console.error('Error fetching events', error);
                failureCallback(error);
            });
    },
    // 添加eventsRender钩子
    eventsRender: function(info) {
        let eventsRendered = calendar.getEvents();
        console.log(eventsRendered); // 此时能拿到所有从API加载的事件
    },
    // 其他原有回调...
})

calendar.render();
// 移除原代码末尾的getEvents调用，因为时机不对

方案2：在events回调的successCallback后调用 #

如果需要在事件加载完成后立刻处理，可以在successCallback之后直接调用getEvents()：

events: function(info, successCallback, failureCallback) {
    fetch('http://green-phoenix.test/api/events')
        .then(response => response.json())
        .then(data => {
            let events = data.map(event => ({
                id: event.id,
                title: event.title,
                start: event.datestr
            }));
            successCallback(events);
            // 事件已被添加到日历实例，此时可获取
            let eventsRendered = calendar.getEvents();
            console.log(eventsRendered);
        })
        .catch(error => {
            console.error('Error fetching events', error);
            failureCallback(error);
        });
},

额外注意 #

• 确保API返回的datestr是FullCalendar支持的日期格式（如ISO 8601格式），否则事件可能无法被正确解析渲染。
• 务必修正代码里的拼写错误calendat为calendar，避免不必要的报错。

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