how can I remove the 00 Uhr everytime in the header ?

code:

      <FullCalendar
        ref={ref}
        resources={res}
        viewClassNames='zd'
        scrollTime={milliseconds - 86400000}
        // @ts-ignore
        events={query}
        schedulerLicenseKey="0487410008-fcs-16832974662" 
        plugins={[ resourceTimelinePlugin, interactionPlugin, dayGrid, scrollGrid ]}
        initialView='resourceTimelineYear'
        allDayContent={(el) => console.log(el)}
        views={{
          resourceTimelineYear: {
            duration: {
              years: 2
            },
            slotDuration: { hours: 24 },
          },
          
        }}
        locale='de'
 />

if I remove slotduration hours 24 then it shows only the months

how can I remove the 00 Uhr everytime in the header ?

code:

      <FullCalendar
        ref={ref}
        resources={res}
        viewClassNames='zd'
        scrollTime={milliseconds - 86400000}
        // @ts-ignore
        events={query}
        schedulerLicenseKey="0487410008-fcs-16832974662" 
        plugins={[ resourceTimelinePlugin, interactionPlugin, dayGrid, scrollGrid ]}
        initialView='resourceTimelineYear'
        allDayContent={(el) => console.log(el)}
        views={{
          resourceTimelineYear: {
            duration: {
              years: 2
            },
            slotDuration: { hours: 24 },
          },
          
        }}
        locale='de'
 />

if I remove slotduration hours 24 then it shows only the months

• reactjs
• fullcalendar

1 Answer 1

The time slots including midnight values due to slotDuration: { hours: 24 } and since you are viewing it in day slots those values are showing in the header. You can either change the slotDuration: { day: 1 } or change the slotLabelContent like below.

To override the slotLabelContent:

  const slotLabelContent = (arg) => {
    return `${arg.text}`;
  };

<FullCalendar
...
slotLabelContent={slotLabelContent}
...
/>

Note: I just print the text of the arg, you can use whatever logic there.