React-big-calendar多日事件需显示对应时间段而非顶部求助

问题分析 #

使用react-big-calendar时，已将多日事件的allDay设为false，但事件仍显示在月视图顶部，而非对应时间段位置。这是因为组件默认在月视图中会将跨多天的非全天事件置于顶部，需通过特定配置调整。

解决方案步骤 #

1. 转换事件时间为Date对象 #

你的事件数据中start和end是字符串格式，组件需要Date对象才能正确识别时间位置。在传入events前做转换：

const parsedEvents = event.map(evt => ({
  ...evt,
  start: new Date(evt.start),
  end: new Date(evt.end)
}));

之后将events={parsedEvents}传入Calendar组件。

2. 开启showMultiDayTimes属性 #

在Calendar组件中添加showMultiDayTimes={true}，该属性会让月视图中的多日非全天事件显示在对应的时间段位置，而非顶部：

<Calendar
  // 其他现有属性...
  showMultiDayTimes={true}
/>

3. 验证localizer配置 #

确保momentLocalizer初始化正确，避免因时间解析错误导致事件位置异常：

import moment from 'moment';
const localizer = momentLocalizer(moment);

4. 检查自定义事件组件（CustomEvent） #

如果CustomEvent组件有自定义布局逻辑，可能覆盖了默认的时间定位。确保它没有强制设置固定位置或宽高，保留组件默认行为。

5. 调整eventPropGetter中的样式 #

移除eventPropGetter中的width:"100%"和display:"block"，这些样式可能干扰组件默认布局：

eventPropGetter={(event) => {
  const backgroundColor =
    event.type === "one_on_one_session" ? "#f0e3d7" : "#dce5f1";
  const fontColor =
    event.type === "one_on_one_session" ? "#D98C43" : "#10375c";
  return {
    style: {
      backgroundColor: backgroundColor,
      color: fontColor,
      borderRadius: "1px",
      border: "0px",
    },
  };
}}

修改后的完整组件示例 #

import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from 'moment';

const localizer = momentLocalizer(moment);

// 转换事件时间为Date对象
const parsedEvents = event.map(evt => ({
  ...evt,
  start: new Date(evt.start),
  end: new Date(evt.end)
}));

<Calendar
  culture="en-GB"
  localizer={localizer}
  events={parsedEvents}
  dayLayoutAlgorithm="overlap"
  startAccessor="start"
  endAccessor="end"
  style={{ height: 600 }}
  step={15}
  views={["month", "week", "day"]}
  onNavigate={handleNavigate}
  components={{
    toolbar: CustomToolbar,
    event: CustomEvent,
  }}
  formats={{
    eventTimeRangeFormat: (date, culture, localizer) => "",
    weekdayFormat: (date, culture, localizer) =>
      localizer.format(date, "dddd", culture),
    dayHeaderFormat: (date, culture, localizer) =>
      localizer.format(date, "dddd, DD MMMM YYYY", culture),
  }}
  showMultiDayTimes={true} // 添加该属性
  eventPropGetter={(event) => {
    const backgroundColor =
      event.type === "one_on_one_session" ? "#f0e3d7" : "#dce5f1";
    const fontColor =
      event.type === "one_on_one_session" ? "#D98C43" : "#10375c";
    return {
      style: {
        backgroundColor: backgroundColor,
        color: fontColor,
        borderRadius: "1px",
        border: "0px",
      },
    };
  }}
/>

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