React FullCalendar如何在日历中展示extendedProps额外数据？

要在FullCalendar里展示事件的extendedProps数据，有两种常用方式，可根据需求选择：

1. 在日历事件块中直接显示额外属性 #

通过eventContent自定义事件的渲染内容，把extendedProps里的字段直接展示在日历的事件卡片上：

首先给FullCalendar组件添加eventContent属性：

<FullCalendar
  plugins={[
    dayGridPlugin,
    timeGridPlugin,
    interactionPlugin,
    listPlugin,
  ]}
  headerToolbar={{
    left: "prev,next",
    center: "title",
    right: "timeGridDay,listDay",
  }}
  initialView="timeGridDay"
  editable={true}
  selectable={true}
  selectMirror={true}
  dayMaxEvents={true}
  weekends={weekendsVisible}
  select={handleClickDate}
  initialEvents={INITIAL_EVENTS}
  initialDate={result}
  eventClick={handleEventClick}
  eventsSet={handleEvents}
  // 添加自定义事件渲染属性
  eventContent={renderEventContent}
/>

然后定义renderEventContent函数，用来渲染事件的自定义内容：

const renderEventContent = (info) => {
  const { event } = info;
  const { extendedProps } = event;
  
  return (
    <div className="fc-event-content">
      <span>{event.title}</span>
      {/* 按需渲染extendedProps里的字段，避免undefined */}
      {extendedProps.department && <div>部门：{extendedProps.department}</div>}
      {extendedProps.organization && <div>组织：{extendedProps.organization}</div>}
    </div>
  );
};

这样日历上的每个事件块就会显示标题和对应的额外属性内容。

2. 点击事件时展示额外属性 #

如果希望点击事件时才展示extendedProps数据，可以修改你的handleEventClick函数：

const handleEventClick = (info) => {
  const { event } = info;
  const { extendedProps } = event;
  
  // 这里可以用alert、自定义弹窗或者控制台输出
  let extraInfo = '';
  if (extendedProps.department) {
    extraInfo += `部门：${extendedProps.department}\n`;
  }
  if (extendedProps.organization) {
    extraInfo += `组织：${extendedProps.organization}`;
  }
  
  alert(`${event.title}\n${extraInfo}`);
  
  // 如果用React弹窗组件，可将extendedProps数据传入弹窗进行展示
};

点击日历事件时，就会弹出包含事件标题和额外属性的提示框。

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