FullCalendar事件函数模式下无法渲染事件求助

你这是踩了FullCalendar events 函数模式的典型坑——数据已经拿到手了，但没主动传递给FullCalendar。之前用数组模式时，日历会直接读取数组内容渲染，但函数模式下，必须调用FullCalendar提供的successCallback把处理好的事件数据"交回去"，日历才会触发渲染逻辑。

核心问题点 #

你的代码里，AJAX成功后只是把数据push到了全局的sessionCalendar数组，但FullCalendar根本不知道这个数组的变化，自然不会去渲染事件。函数模式下，全局数组的更新不会自动同步给日历，必须通过回调函数主动通知。

修改方案 #

我们调整两个关键地方就能解决：

1. 让calendarParse返回处理后的事件数组，不再依赖全局变量
2. 在AJAX的success回调里，调用successCallback把处理好的数组传给FullCalendar

修改后的代码如下：

calendar_view_session: function(){ 
    var calendarEl = document.getElementById('calendar'); 
    var calendar = new FullCalendar.Calendar(calendarEl, { 
        plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction' , 'momentTimezone' ], 
        header: { 
            left: 'prev,next today', 
            center: 'title', 
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' 
        }, 
        defaultDate: '2019-04-12', 
        navLinks: true, 
        editable: false, 
        eventLimit: true, 
        events: function(info, successCallback,failureCallback) { 
            console.log(info); 
            var date1 = new Date(info.start.valueOf()); 
            var date2 = new Date(info.end.valueOf()); 
            var callData = { 
                from_date:moment.tz(date1, timeZone).format('YYYY-MM-DD'), 
                to_date: moment.tz(date2, timeZone).format('YYYY-MM-DD') 
            } 
            console.log(callData); 
            $.ajax({ 
                url:app.createApiPath(apiController_data,apiAction_data), 
                method:"POST", 
                dataType: "json", 
                data: { 
                    callData: JSON.parse(JSON.stringify(callData)), 
                    api_version: 1, 
                    deviceType: 'web' 
                }, 
                success: function(responseData){ 
                    console.log({responseData}) 
                    // 拿到处理后的事件数组，传给FullCalendar的回调函数
                    const processedEvents = app.calendarParse(responseData.data.results);
                    successCallback(processedEvents); // 关键：通知日历渲染事件
                },
                error: function(xhr, status, error) {
                    // 别忘了处理错误场景，让日历知道请求失败了
                    failureCallback(`获取事件数据失败：${error}`);
                }
            }) 
        }
    }); 
    calendar.render(); 
}, 
calendarParse: function(apiData){ 
    const events = []; // 用局部变量替代全局sessionCalendar，避免全局污染
    for(var i=0; i<apiData.length; i++){ 
        const { bookingId, course, customers, end_date_time, id, lm_firstname, lm_lastname,localmasterId, meeting_id, meeting_type, payout, request_payout_status, sessionDate, session_status, start_date_time, status,attributes } = apiData[i]; 
        // 注意：你代码里的customersName和meetingtype变量要确保已定义，不然会报错
        events.push( { 
            title: `${course["course_name"]}`, 
            start: gbl.datetime_utc(start_date_time), 
            end: gbl.datetime_utc(end_date_time), 
            customers: customersName, 
            localmasterName: lm_firstname + " " + lm_lastname, 
            sessionStatus: session_status, 
            meetingType: meetingtype, 
            payoutStatus: request_payout_status, 
            sessionDate: sessionDate, 
            startTime: gbl.datetime(start_date_time), 
            endTime: gbl.datetime(end_date_time) 
        }) 
    }
    return events; // 返回处理好的事件数组
}

额外注意事项 #

• 检查代码里的customersName和meetingtype变量，确保它们在calendarParse函数内已正确定义（当前代码里没看到这两个变量的来源，可能会导致报错）
• 确认gbl.datetime_utc返回的是FullCalendar能识别的时间格式（比如标准ISO 8601字符串：YYYY-MM-DDTHH:mm:ssZ）
• 加上错误处理的failureCallback，API请求失败时能及时反馈问题，方便排查

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