javascriptreactjsfullcalendarfullcalendar-6

Fullcalendar v6 React date format "DD/MM" instead of "M/d"


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.

enter image description here


Solution

  • 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,
          }}
        />
      );
    }