CODEWITHSUNDEEP
javascriptfullcalendarfullcalendar-5
Allen Y
Allen Y

Reputation: 690

React FullCalendar not showing allDay event

I'm using FullCalendar 5.11 in React. Non-all-day events are showing up, but all-day events are not.

Here's the FullCalendar setup:

                <FullCalendar
                    height='100%'
                    width='50px'
                    initialView='timeGridDay'
                    allDaySlot={true}
                    plugins={[ timeGridPlugin ]}
                    events={ events }
                    eventMaxStack={ 1 }
                    nowIndicator={true}
                    eventClick={ eventClickHandler }
                    headerToolbar={ headerToolbar }
                    titleFormat={{ year: 'numeric', month: 'short', day: 'numeric' }}
                />

The calendar renders correctly, and there's the all day slot at the top.

Here's an example of an event that shows up correctly:

{id: 'tvid6bu8mbqphkqig7qooline0', title: 'Test 30min event', backgroundColor: '#000000', start: '2020-05-12T01:30:00.000Z', end: '2020-05-12T02:00:00.000Z'}

Here's an example of an all-day event that doesn't show up:

{id: '64rjv5muo12ha2ih4al3caajue', title: 'Test all day event', backgroundColor: '#fbe983', allDay: true, startStr: '2022-08-23'}

In the allDay json, including endStr or using instead start and end both don't fix the issue. I've tried an endStr or end that are one day or two days after the start too.

Moreover, I searched the HTML of the page - it's not that the all day event is just hidden somewhere.

Can anybody help me spot what I'm missing here?

Upvotes: 0

Views: 1793

Answers (1)

Mike Irving
Mike Irving

Reputation: 1628

You need to use start and end not startStr or endStr

end is not required though

try changing your JSON

{
  id: '64rjv5muo12ha2ih4al3caajue',
  title: 'Test all day event',
  backgroundColor: '#fbe983',
  allDay: true,
  start: '2022-08-23'
}

example working in codepen

Upvotes: 2

Related Questions