我正在 Reactjs 应用程序上使用 ResourceTimeGrid 视图。事件时间使用 12 小时制显示,因此我按照文档并使用 EvenTimeFormat 将其更改为 24 小时制,但是当我这样做时,事件时间停止显示,现在显示事件日期(我不不想这个)。 (我正在使用 FullCalendar v6)
这是组件代码:
<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,
meridiem: false,
hour12: false,
allDay: false
}]}
/>
这是事件数组:
{
id: '1',
title: 'Early-Morning',
start: '2024-03-12T07:00:00',
end: '2024-03-12T09:00:00',
resourceId: '1'
},
{
id: '2',
title: 'Late-Morning',
start: '2024-03-12T09:00:00',
end: '2024-03-12T13:00:00',
resourceId: '2'
},
{
id: '3',
title: 'mid-day',
start: '2024-03-12T13:00:00',
end: '2024-03-12T14:00:00',
resourceId: '3'
}
我最初尝试使用“meridiem: false”标志,但随后我也尝试使用“hour12: false”标志,问题保持不变(查看下面链接的图像以查看其显示方式)
编辑:我找到了一个解决方法,包括我的国家/语言的区域设置代码,因为我的国家使用 24 小时时钟并完全删除 eventTimeFormat 标签。但是,如果我仍然包含 eventTimeFormat 标记,问题仍然存在。
这是一个语法错误,我将 eventTimeFormat 的值作为数组处理,这是错误的。正确的语法如下
eventTimeFormat={{
hour: 'numeric',
minute:'2-digit',
omitZeroMinute: true,
meridiem: false,
hour12: false,
allDay: false
}}