React-big-calendar结合dayjs时长事件周日及结束日不显示问题排查

核心问题分析 #

你遇到的两个现象（周日不显示事件、结束日期不显示事件）分别对应react-big-calendar的两个常见配置问题：

1. 结束日期不显示：endAccessor 的排他性规则 #

react-big-calendar 对结束时间的处理是排他的——事件只会渲染到结束时间的前一秒。你的事件结束时间是Tue Aug 29 2023 15:44:00 GMT+0300，这意味着在8月29日的日历视图中，事件仅覆盖到当天15:44之前的时段；在月视图中，因为事件没有占据全天，可能被判定为"不在当天完整显示"而被隐藏。

修复方法：
如果希望事件显示到结束日期的全天，把结束时间调整为结束日期的次日0点，或者当天的23:59:59。例如：

// 假设你的事件数据是对象，修改endTime
const adjustedEvent = {
  ...event,
  endTime: dayjs(event.endTime).add(1, 'day').startOf('day').toDate()
}

2. 周日不显示：周起始未匹配芬兰locale #

芬兰地区的周起始是周一，但react-big-calendar不会自动通过culture="fi"同步周起始规则，需要显式指定weekStartsOn属性：

修复方法：
在Calendar组件中添加weekStartsOn={1}（0代表周日，1代表周一）：

<Calendar
  // 其他属性不变
  weekStartsOn={1}
/>

额外优化建议 #

如果你希望跨多天的非全天事件在日历中更清晰显示，可以开启showMultiDayTimes属性（你之前注释掉了）：

showMultiDayTimes={true}

完整修改后的组件代码 #

import { Calendar, dayjsLocalizer } from "react-big-calendar";
import 'react-big-calendar/lib/css/react-big-calendar.css';
import dayjs from "dayjs";
import fi from 'dayjs/locale/fi';
dayjs.locale(fi)

// 补充localizer初始化代码（你原代码中未显示这部分）
const localizer = dayjsLocalizer(dayjs);

<Calendar
  culture="fi"
  events={data}
  titleAccessor="definition"
  localizer={localizer}
  startAccessor="startTime"
  endAccessor="endTime"
  style={{ height: 600 }}
  messages={defaultMessagesFi}
  defaultView={'month'}
  views={['day', 'week', 'work_week', 'month','agenda']}
  scrollToTime={dayjs().set('hour', 8).set('minute', 0).set('second', 0)}
  showMultiDayTimes={true}
  weekStartsOn={1}
/>

另外还要检查你的data数组中，所有事件的startTime和endTime是否都是标准的Date对象，或者dayjs可以正确解析的格式，格式错误也会导致事件渲染异常。

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