如何修改react-big-calendar拖拽时段框的时间格式（12→24小时）

问题根源 #

react-big-calendar的默认拖拽时段提示框，并未完全继承localizer的区域格式配置，导致即使全局设置了24小时制，拖拽选择时仍会使用默认的12小时制显示时间。

可行解决方案 #

方案1：自定义选择提示框组件 #

通过components属性替换默认的Select组件，手动将拖拽时段的开始/结束时间格式化为24小时制：

import { Calendar, dateFnsLocalizer, Select } 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 { fi } from 'date-fns/locale';

const locales = {
  'fi-FI': fi,
}

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

// 自定义拖拽时段提示组件
const CustomSelect = ({ start, end, ...props }) => {
  const formattedStart = format(start, 'HH:mm', { locale: fi })
  const formattedEnd = format(end, 'HH:mm', { locale: fi })
  return (
    <Select
      {...props}
      label={`${formattedStart} - ${formattedEnd}`}
    />
  )
}

const MyCalendar = (props) => (
  <div>
    <Calendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
      // 注入自定义组件
      components={{
        select: CustomSelect
      }}
    />
  </div>
)

方案2：全局覆盖时间格式化规则 #

通过重写localizer的format方法，统一指定所有场景下的时间显示为24小时制：

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 { fi } from 'date-fns/locale';

const locales = {
  'fi-FI': fi,
}

// 自定义格式化函数，强制时间类显示使用24小时制
const customFormat = (date, formatStr, locale) => {
  // 匹配react-big-calendar内部调用的时间格式标识
  if (['time', 'h:mm a', 'hh:mm'].includes(formatStr)) {
    return format(date, 'HH:mm', { locale })
  }
  // 其他场景沿用默认格式化规则
  return format(date, formatStr, { locale })
}

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

const MyCalendar = (props) => (
  <div>
    <Calendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
    />
  </div>
)

效果验证 #

应用上述任一方案后，拖拽创建事件时的时段框将显示24小时制时间，与已有事件的时间格式完全统一。

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