Search code examples
reactjsfullcalendar

FullCalendar eventTimeFormat is making the event time to not be shown, just the date


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)

full callender ResourceTimeGrid view with 3 events. One titled "early morning", other titled "late morning" and other titled "mid-day" all showing in different resource columns and all showing with the time as "3/12/2024" (a date in the mm/dd/yyyy format) and not the times they occur at

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.


Solution

  • 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
           }}