FullCalendar v5使用eventRender无法渲染事件，应采用什么替代方案？

FullCalendar v5 已正式废弃旧版本的 eventRender 回调，对应功能请使用 eventDidMount 生命周期钩子实现，该钩子会在事件元素被插入DOM后触发，完全覆盖原eventRender的使用场景。

现有代码的两个问题 #

1. 旧版本eventRender是驼峰命名，你代码中写的全小写eventrender本身就无法触发
2. v5版本已移除该属性，需替换为新的钩子API，且回调参数结构发生了变化

修改后的完整代码 #

<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    <?php
    include 'config.php';
    $items = array();
    $query = mysqli_query($connection, "SELECT * FROM events_table WHERE grade_id = '{$studentGradeId}' ");
    while ($result = mysqli_fetch_array($query)) {
        $items[] = array(
            'title' => $result['event_title'],
            'start' => date('Y-m-d', strtotime($result['event_date'])),
        );
    };
    ?>
    var items = <?php echo json_encode($items); ?>

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,dayGridWeek,dayGridDay'
        },
        events: items,
        // 替换为v5的eventDidMount钩子
        eventDidMount: function(info) {
            // info.el是原生DOM元素，用jQuery操作需要先包裹
            $(info.el).find('.fc-title').text(info.event.title);
            // 不依赖jQuery的原生写法：
            // info.el.querySelector('.fc-title').textContent = info.event.title;
        }
    });
    calendar.render();
});
</script>

补充说明 #

• 回调参数info为统一对象，常用属性：
  • info.event：当前事件对象，标题、时间、自定义扩展属性都从该对象下获取
  • info.el：当前事件对应的原生DOM元素
• 如果需要在事件数据更新后重新修改渲染内容，可使用eventDidUpdate钩子，用法和eventDidMount完全一致
• 如果需要在事件元素被移除前做清理操作，可使用eventWillUnmount钩子

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