FullCalendar 5 eventClick事件中如何获取重复事件系列的结束日期

算力阿峰

2026-9-25

解决方案

FullCalendar 5 会将事件对象的非标准自定义字段全部存放在 extendedProps 属性下，你需要的重复事件系列全局配置（包括startRecur、endRecur）都可以从该属性获取。

你只需要修改eventClick回调中对应取值逻辑即可，兼容endRecur为null的场景的代码如下：

eventClick: function(info) {
    var eventObj = info.event;
    // 从extendedProps取重复系列全局配置
    const extProps = eventObj.extendedProps;
            
    $('#updateDescription').val(eventObj.title);
    // 取系列的开始日期，不需要可以保留原来的单实例取值逻辑
    $('#updateStartDate').val(extProps.startRecur ? moment(extProps.startRecur).format('DD/MM/YYYY') : moment(eventObj.start).format('DD/MM/YYYY'));
    // 取系列的结束日期，处理为null的场景
    $('#updateEndDate').val(extProps.endRecur ? moment(extProps.endRecur).format('DD/MM/YYYY') : '无结束日期');
    // 时间字段单实例和全局配置一致，无需调整取值逻辑
    $('#updateStartTime').val(moment(eventObj.start).format('HH:mm'));
    $('#updateEndTime').val(moment(eventObj.end).format('HH:mm'));
    $('#updateColour').val(extProps.backgroundColor);
            
    $('#ecClickModal').modal('show');
}