React-Big-Calendar日期显示异常求助：年份/星期格式错误

常见排查点及修复步骤 #

1. 确认依赖版本兼容性 #

React-Big-Calendar对date-fns有版本要求，v10及以上版本的RBC需要搭配date-fns v2.x版本，不要混用v1版本。执行以下命令确保安装正确版本：

npm install react-big-calendar date-fns@2.x
# 或用yarn
yarn add react-big-calendar date-fns@2.x

2. 正确配置localizer #

必须完整导入并初始化date-fns的localizer，且传递给Calendar组件，缺一不可：

import { Calendar, dateFnsLocalizer } from 'react-big-calendar';
import format from 'date-fns/format';
import parse from 'date-fns/parse';
import startOfWeek from 'date-fns/startOfWeek';
import getDay from 'date-fns/getDay';
import enUS from 'date-fns/locale/en-US'; // 用中文的话替换成zh-CN

const locales = {
  'en-US': enUS,
};

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
});

// 组件中使用示例
function MyCalendar() {
  return (
    <Calendar
      localizer={localizer}
      events={[]} // 替换成你的事件数据
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
    />
  );
}

如果用中文本地化，要导入date-fns/locale/zh-CN并在locales对象中添加对应键值对。

3. 检查核心方法是否遗漏 #

date-fnsLocalizer必须传入format、parse、startOfWeek、getDay这四个核心方法，少一个都会导致格式化失败，显示占位符。

4. 彻底清理缓存并重建 #

如果旧缓存导致代码残留，执行以下操作：

# 清除npm缓存
npm cache clean --force
# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 重新启动/构建项目
npm run start # 或对应的构建命令

5. 校验Calendar组件的字段映射 #

确保startAccessor和endAccessor与你的事件数据中的日期字段名匹配，比如你的事件对象是{ startTime: new Date(), endTime: new Date() }，则需要设置：

<Calendar
  startAccessor="startTime"
  endAccessor="endTime"
  // 其他props
/>

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