CodeIgniter中FullCalendar插入数据后无法自动刷新事件求助

在CodeIgniter框架中使用FullCalendar展示考勤数据时，用户提交考勤数据后必须手动刷新页面才能在日历中看到新数据，需要实现无需刷新页面即可更新日历数据的功能。

相关代码 #

控制器获取考勤记录方法 #

public function showRecords() {
    $employeeid = getSession('empid');
    $data = $this->attendance->getAttendanceRecords($employeeid);
    echo json_encode($data);
}

FullCalendar初始化脚本 #

$(document).ready(async function() {
        let recordJson;
        await $.post('<?= getURL('attendance/calendar') ?>', function(data) {
            recordJson = JSON.parse(data);
        });
        setTimeout(function() {
            let calendarEl = document.getElementById('fullCalendar');
            let fullCalendar = new FullCalendar.Calendar(calendarEl, {
                themeSystem: 'bootstrap5',
                headerToolbar: {
                    left: 'attendanceLog',
                    center: 'title',
                    right: 'today,prev,next'
                },
                customButtons: {
                    attendanceLog: {
                        text: 'Attendance Log',
                        click: function(info) {
                            let recordObj = info.event
                            const recordURL = '<?= getURL('attendance/records/') ?>' + recordObj.id
                            if(recordObj) {
                                modalForm(
                                    'Attendance Records',
                                    'modal-sm',
                                    recordURL,
                                )
                            }
                        }
                    }
                },
                eventDisplay: 'background',
                events: recordJson,
                eventClick: function(info) {
                    let eventObj = info.event
                    const formURL = '<?= getURL('attendance/form/') ?>' + eventObj.id
                    if(eventObj) {
                        modalForm(
                            'Attendance',
                            'modal-md',
                            formURL,
                        )
                    }
                }
        });
            fullCalendar.render();
        }, 200);
    });

自定义无效的refetch函数 #

function refetch() {
        const fullCalendar = document.getElementById('fullCalendar')
    $.ajax({
        type: 'GET',
        url: "<?= getURL('attendance/refetch') ?>",
        dataType: "json",
        success: function(response) {
            fullCalendar.render()
        },
        error: function(xhr, ajaxOptions, thrownError) {
            showError(thrownError + ", please contact administrator for further assistance");
        }
        });
    }

考勤数据提交代码 #

$(document).ready(function() {
        $('#form-attendance').on('submit', function(e) {
            e.preventDefault();
            let csrf = decrypter($("#csrf_token").val())
            $("#csrf_token_form").val(csrf);
            let link = "<?= getURL('attendance/clockin') ?>"
            let form_type = "<?= $form_type ?>"
            if(form_type == 'clocked') {
                link = "<?= getURL('attendance/clockout') ?>"
            }
            let data = $(this).serialize();

            $.ajax({
                type: 'POST',
                url: link,
                data: data,
                dataType: "json",
                success: function(response) {
                    $("#csrf_token").val(encrypter(response.csrfToken))
                    $("#csrf_token_form").val("")
                    let pesan = response.pesan;
                    let notif = 'success';
                    if (response.sukses != 1) {
                        notif = 'error'
                    }
                    if (response.pesan != undefined) {
                        pesan = response.pesan
                    }
                    showNotif(notif, pesan)
                    if (response.sukses == 1) {
                        refetch();
                        close_modal('modaldetail')
                    }
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    showError(thrownError + ", please contact administrator for further assistance");
                }
            });
            return false;
        });
    });

问题原因及修复方案 #

核心问题 #

1. 初始化时fullCalendar是局部变量，外部refetch函数无法访问到日历实例，只能操作DOM元素，调用render()不会更新数据。
2. 自定义refetch函数没有正确替换日历的事件数据，仅执行无意义的渲染操作。

修复步骤 #

1. 将日历实例暴露为全局变量

修改初始化脚本，把fullCalendar变量提升到全局作用域，让refetch函数能访问到实例：

// 全局变量保存日历实例
let fullCalendarInstance;

$(document).ready(async function() {
    let recordJson;
    await $.post('<?= getURL('attendance/calendar') ?>', function(data) {
        recordJson = JSON.parse(data);
    });
    setTimeout(function() {
        let calendarEl = document.getElementById('fullCalendar');
        // 赋值给全局变量
        fullCalendarInstance = new FullCalendar.Calendar(calendarEl, {
            // 原配置保持不变
            themeSystem: 'bootstrap5',
            headerToolbar: {
                left: 'attendanceLog',
                center: 'title',
                right: 'today,prev,next'
            },
            customButtons: {
                attendanceLog: {
                    text: 'Attendance Log',
                    click: function(info) {
                        let recordObj = info.event
                        const recordURL = '<?= getURL('attendance/records/') ?>' + recordObj.id
                        if(recordObj) {
                            modalForm(
                                'Attendance Records',
                                'modal-sm',
                                recordURL,
                            )
                        }
                    }
                }
            },
            eventDisplay: 'background',
            events: recordJson,
            eventClick: function(info) {
                let eventObj = info.event
                const formURL = '<?= getURL('attendance/form/') ?>' + eventObj.id
                if(eventObj) {
                    modalForm(
                        'Attendance',
                        'modal-md',
                        formURL,
                    )
                }
            }
        });
        fullCalendarInstance.render();
    }, 200);
});

2. 修正refetch函数逻辑

更新refetch函数，通过全局实例清除旧事件并添加新数据：

function refetch() {
    $.ajax({
        type: 'GET',
        url: "<?= getURL('attendance/showRecords') ?>", // 指向正确的考勤数据接口
        dataType: "json",
        success: function(response) {
            // 清除旧事件，添加新数据
            fullCalendarInstance.removeAllEvents();
            fullCalendarInstance.addEventSource(response);
        },
        error: function(xhr, ajaxOptions, thrownError) {
            showError(thrownError + ", please contact administrator for further assistance");
        }
    });
}

3. 优化初始化方式（可选）

直接在FullCalendar配置中指定事件源URL，这样refetchEvents()可以直接生效，无需手动处理数据：

fullCalendarInstance = new FullCalendar.Calendar(calendarEl, {
    // 其他配置不变
    // 直接指定事件源接口，代替手动获取recordJson
    events: '<?= getURL('attendance/showRecords') ?>',
});

此时refetch函数可简化为：

function refetch() {
    fullCalendarInstance.refetchEvents();
}

注意事项 #

确保showRecords接口返回的JSON格式符合FullCalendar要求，每个事件对象需包含id、start等必填字段（可根据考勤数据结构调整）。

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