I'm using the ResourceTimeGrid view on a Reactjs application. The event times were showing using the 12 hour clock, so I followed the documentation and used the evenTimeFormat to change it to the 24 hour clock, but when I did so the event time stopped showing and now the event date is showing (I do not wan't this). (I'm using FullCalendar v6)
Here's the component code:
<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
}]}
/>
Here's the event array:
{
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'
}
I've tried initially with the "meridiem: false" flag, but I've also then tried with just the "hour12: false" flag and the problem stays the same (view image linked bellow to see how it's showing)
EDIT: I found a work around by including the locale code of my country/language, as my country uses the 24 hour clock and removing the eventTimeFormat tag entirely. However if I still include the eventTimeFormat tag the problem continues.
It was a syntax error I has handling the values of eventTimeFormat as an array which is wrong. the correct syntax is the following
eventTimeFormat={{
hour: 'numeric',
minute:'2-digit',
omitZeroMinute: true,
meridiem: false,
hour12: false,
allDay: false
}}