React中使用FullCalendar v6自定义显示事件信息遇问题求助

问题场景 #

开发预约规划器时，使用FullCalendar的eventContent属性自定义事件渲染，期望显示预约的标题、描述及参与者信息，但目前仅能正常显示timeText，其他内容无法展示，相关代码如下：

const CalendarComponent = ({appointments}) => {
  const renderEventContent = (eventInfo) => {
    console.log(eventInfo);
    return (
      <>
        <b>{eventInfo.timeText}</b>
        <i>{eventInfo.event.title}</i>
      </>
    )
  };

  return (
    <FullCalendar 
      plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
      headerToolbar={{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      }}
      initialView='dayGridMonth'
      editable={true}
      selectable={true}
      selectMirror={true}
      dayMaxEvents={true}
      displayEventEnd={true}
      weekends={true}
      events={appointments}
      eventContent={renderEventContent} // custom render function
    />
  );
};

解决步骤 #

1. 确认事件数据结构正确性 #

FullCalendar会将非标准字段（如描述、参与者）自动归类到event.extendedProps属性下，而非直接挂载在event根节点。先检查你的appointments数组，确保每个事件包含所需字段：

// 正确的appointments数据示例
const appointments = [
  {
    id: 1,
    title: "项目评审会",
    start: "2024-05-20T10:00:00",
    end: "2024-05-20T12:00:00",
    extendedProps: {
      description: "Q2项目进度评审",
      participants: ["张三", "李四", "王五"]
    }
  }
];

2. 调整eventContent渲染逻辑 #

修改渲染函数，从event.extendedProps中读取自定义字段，用容器元素包裹内容（避免JSX片段导致的渲染异常），同时处理空值场景：

const CalendarComponent = ({appointments}) => {
  const renderEventContent = (eventInfo) => {
    const { event, timeText } = eventInfo;
    const { description, participants } = event.extendedProps;
    const participantText = participants?.join(', ') || '无参与者';

    return (
      <div className="custom-event-container">
        <b>{timeText}</b>
        <div className="event-title"><i>{event.title}</i></div>
        {description && <div className="event-desc">{description}</div>}
        <div className="event-participants">参与者：{participantText}</div>
      </div>
    );
  };

  return (
    <FullCalendar 
      plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
      headerToolbar={{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      }}
      initialView='dayGridMonth'
      editable={true}
      selectable={true}
      selectMirror={true}
      dayMaxEvents={true}
      displayEventEnd={true}
      weekends={true}
      events={appointments}
      eventContent={renderEventContent}
      eventClassNames="custom-event"
    />
  );
};

3. 添加样式适配视图空间 #

月视图（dayGridMonth）的事件容器空间有限，通过CSS调整字体大小和布局，确保内容完整显示：

.custom-event {
  padding: 3px 4px;
  overflow: hidden;
  white-space: normal; /* 允许内容换行 */
}
.custom-event-container {
  font-size: 0.85em;
  line-height: 1.3;
}
.event-title {
  margin: 2px 0;
}
.event-desc {
  color: #555;
  font-size: 0.9em;
  margin: 2px 0;
}
.event-participants {
  color: #666;
  font-size: 0.8em;
}

4. 可选：处理视图空间不足问题 #

如果月视图无法容纳所有内容，可通过eventClick触发弹窗展示完整信息：

// 在FullCalendar组件中添加eventClick属性
eventClick={(info) => {
  const { title, extendedProps } = info.event;
  alert(`
    预约标题：${title}
    描述：${extendedProps.description || '无'}
    参与者：${extendedProps.participants?.join(', ') || '无'}
  `);
}}

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