FullCalendar点击事件区分问题：里程碑点击无响应，预约点击弹窗

问题背景 #

现有FullCalendar代码同时渲染里程碑和房间预约事件，点击预约能正常唤起详情弹窗，但点击里程碑也会触发相同弹窗，需要实现仅预约事件点击弹窗，里程碑点击无响应的效果。

原实现代码：

<FullCalendar
    allDaySlot={true}
    eventClick={(info) => this.openReservationInfoModal(info.event)}
    events={[...milestones.map(milestone => ({
        id: milestone.id,
        title: milestone.description,
        start: milestone.expectedDate,
        allDay: true
    })), ...this.state.reservations]}
/>

曾尝试给里程碑添加type: 'milestone'属性并在点击时判断，但未生效。

问题原因 #

此前方案的核心逻辑没问题，但失效大概率是两个原因：

1. 自定义属性未正确挂载到FullCalendar事件对象的extendedProps中；
2. 读取属性时的路径或判断条件有误。

正确解决方案 #

方案1：显式挂载自定义标识并精准判断 #

直接将里程碑的标识存入extendedProps，点击时读取该属性判断事件类型：

<FullCalendar
    allDaySlot={true}
    eventClick={(info) => this.handleEventClick(info)}
    events={[
        ...milestones.map(milestone => ({
            id: milestone.id,
            title: milestone.description,
            start: milestone.expectedDate,
            allDay: true,
            // 显式挂载里程碑标识到extendedProps
            extendedProps: {
                isMilestone: true
            }
        })),
        ...this.state.reservations
    ]}
/>

// 点击事件处理函数
handleEventClick(info) {
    const event = info.event;
    // 判断是否为里程碑，是则直接返回不执行后续逻辑
    if (event.extendedProps.isMilestone) {
        return;
    }
    // 非里程碑事件，唤起预约弹窗
    this.openReservationInfoModal(event);
}

openReservationInfoModal(reservation) {
    // 保留原弹窗逻辑
    console.log('Reservation clicked', reservation);
    // 你的弹窗渲染代码
}

方案2：利用现有特征区分（无法添加自定义属性时用） #

如果业务限制无法给里程碑加自定义属性，可通过ID规则、标题特征等现有字段判断：

handleEventClick(info) {
    const event = info.event;
    // 示例：假设里程碑ID以"MILESTONE-"开头
    if (event.id.startsWith('MILESTONE-')) {
        return;
    }
    // 也可通过标题关键字判断：if (event.title.includes('里程碑')) { return; }
    this.openReservationInfoModal(event);
}

方案3：CSS配合逻辑双重禁用（视觉+交互） #

给里程碑事件添加专属类名，用CSS禁止点击交互，同时保留逻辑判断兜底：

<FullCalendar
    allDaySlot={true}
    eventClick={(info) => this.handleEventClick(info)}
    events={[
        ...milestones.map(milestone => ({
            id: milestone.id,
            title: milestone.description,
            start: milestone.expectedDate,
            allDay: true,
            classNames: ['milestone-event']
        })),
        ...this.state.reservations
    ]}
/>

添加CSS样式：

.milestone-event {
    pointer-events: none; /* 禁用点击交互 */
    background-color: #eee; /* 可选：添加视觉区分 */
}

关键注意点 #

• 测试时可在handleEventClick中打印event对象，确认extendedProps中的标识是否存在；
• 类组件中需注意handleEventClick的this指向问题，可通过箭头函数或bind绑定上下文；
• 若使用FullCalendar v5+版本，自定义属性必须存入extendedProps才能被正确读取。

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