I can't find how to change 9am
to 09:00
, 10am
to 10:00
Also can't understand how to change 6/1
to 01/06
, 6/2
to 02/06
both in header and in the event. I've found the eventTimeFormat
option, but that is all I could achieve: showing the date, time start - time end
on the event. Seems I can't change the date to be 01/06
nowhere.
You can fix both issues using dayHeaderFormat and slotLabelFormat.
To display time like 09:00 instead of 9am on the left time axis, use:
slotLabelFormat={{
hour: "2-digit",
minute: "2-digit",
hour12: false
}}
To show the header dates (like 6/1) as 01/06, use:
dayHeaderFormat={{
day: "2-digit",
month: "2-digit"
}}
Setting locale="en-GB" in FullCalendar primarily affects how dates and times are formatted. For example, it changes the date format from 06/01 (month/day) to 01/06 (day/month). It also affects how certain built-in text strings are displayed. Full example:
import React from 'react';
import FullCalendar from '@fullcalendar/react';
import timeGridPlugin from '@fullcalendar/timegrid';
export default function MyCalendar() {
return (
<FullCalendar
plugins={[timeGridPlugin]}
initialView="timeGridWeek"
allDaySlot={false}
locale="en-GB"
events={[
{
title: 'test',
start: '2025-06-01T10:00:00',
end: '2025-06-01T10:30:00',
},
]}
eventTimeFormat={{
day: '2-digit',
month: '2-digit',
hour: '2-digit',
minute: '2-digit',
hour12: false,
}}
dayHeaderFormat={{
day: '2-digit',
month: '2-digit',
}}
slotLabelFormat={{
hour: '2-digit',
minute: '2-digit',
hour12: false,
}}
/>
);
}