如何在React-Big-Calendar日程槽中设置24小时时间格式？

React-Big-Calendar的时间显示逻辑不依赖你手动格式化start字段，而是通过内置的本地化（localizer）系统控制。以下是具体解决步骤：

1. 确保正确配置moment本地化器 #

先确认你已经引入必要依赖并初始化localizer：

import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';

// 初始化moment本地化器
const localizer = momentLocalizer(moment);

2. 两种方式设置24小时制格式 #

方式一：全局配置moment的时间格式 #

直接修改moment的本地化规则，强制使用24小时制：

// 覆盖英文 locale 的时间格式，全部使用HH:mm（24小时制）
moment.locale('en', {
  longDateFormat: {
    LT: 'HH:mm',
    LTS: 'HH:mm:ss',
    L: 'DD/MM/YYYY',
    LL: 'D MMMM YYYY',
    LLL: 'D MMMM YYYY HH:mm',
    LLLL: 'dddd, D MMMM YYYY HH:mm'
  }
});

之后渲染Calendar时传入localizer即可：

<Calendar
  localizer={localizer}
  events={yourEventsList}
  startAccessor="start"
  endAccessor="end"
  // 其他组件props
/>

方式二：给Calendar组件自定义formats属性 #

如果不想全局修改moment配置，可以直接给Calendar指定时间显示格式：

<Calendar
  localizer={localizer}
  events={yourEventsList}
  startAccessor="start"
  endAccessor="end"
  formats={{
    timeGutterFormat: 'HH:mm', // 左侧时间槽的时间格式
    eventTimeRangeFormat: ({ start, end }) => 
      `${moment(start).format('HH:mm')} - ${moment(end).format('HH:mm')}`, // 日程卡片内的时间范围
    dayHeaderFormat: 'ddd, DD/MM', // 日视图顶部的日期格式（可选）
  }}
/>

关键注意点 #

• 你的events数据中，start和end字段必须是Date对象或moment对象，不能是你手动格式化后的字符串。如果原始数据是时间字符串，处理时要转成日期类型：

const processedEvents = rawData.map(el => ({
  ...el,
  start: moment(el.StartDate).toDate(), // 转成Date对象
  end: moment(el.EndDate).toDate()
}));

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