React中FullCalendar v6的eventTimeFormat致事件时间消失仅显日期

问题核心 #

你遇到的问题根源是**eventTimeFormat被错误地用数组包裹**。FullCalendar v6中，eventTimeFormat配置项仅接受单个格式化对象，而非数组（数组格式是slotLabelFormat的专属用法，用于适配不同视图下的多格式需求）。错误的数组格式会导致FullCalendar解析规则出错，最终显示日期而非预期的事件时间。

修正后的组件代码 #

移除eventTimeFormat的外层数组，直接使用单个格式化对象即可：

<FullCalendar 
  plugins={[ resourceTimeGridPlugin ]}
  initialView='resourceTimeGridDay'
  timeZone= 'UTC'
  now='2024-03-12'
  resources={[
    {id: '1', title: 'Segunda-feira'},
    {id: '2', title: 'Terça-feira'},
    {id: '3', title: 'Quarta-feira'},
    {id: '4', title: 'Quinta-feira'},
    {id: '5', title: 'Sexta-feira'},
    {id: '6', title: 'Sábado'},
    {id: '7', title: 'Domingo'}
  ]}
  slotDuration='01:00:00'
  slotMinTime='07:00:00'
  slotMaxTime='24:00:00'
  allDaySlot= {false}
  height={'auto'}
  slotLabelFormat={[
    {
      hour: 'numeric',
      minute:'2-digit',
      omitZeroMinute: true,
      meridiem: false, 
      hour12: false,
      allDay: false
    }
  ]}
  defaultAllDay={false}
  events={events_data}
  headerToolbar={false}
  // 修正：移除外层数组，使用单个格式化对象
  eventTimeFormat={          
     hour: 'numeric',
     minute:'2-digit',
     omitZeroMinute: true,
     hour12: false
  }
/> 

额外优化说明 #

• hour12: false已经足够强制24小时制，meridiem: false和allDay: false可以省略，因为hour12: false会自动隐藏上午/下午标识，且你的事件均为非全天事件。
• 你的事件数据格式（ISO 8601格式的start/end字段）完全合规，无需调整。
• 如果需要结合地区化显示，可引入对应地区包（如@fullcalendar/core/locales/pt-br），但前提是eventTimeFormat配置正确。

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