react full calendar end option is weird

Question

Recently using react full calendar. I am not getting the value I want.

The date format entered in 'start' is displayed on the screen as it is. However, the date entered in 'end' is fixed at 12:00am even if the time changes.

  <FullCalendar
    plugins={[dayGridPlugin]}
    dayMaxEventRows={4}
    initialView="dayGridMonth"
    events={[
      {
        title: 'test',
        start: '2023-03-22T12:00:00',
        end: '2023-03-24T10:00:00',
        color: 'green',
      },
      {
        title: 'test2',
        start: '2023-03-22T13:30:00',
        end: '2023-03-24T14:00:00',
        color: 'orange',
      },
      {
        title: 'test3',
        start: '2023-03-22T09:30:00',
        end: '2023-03-24T11:00:00',
        color: 'blue',
      },
      {
        title: 'test4',
        start: '2023-03-22T14:30:00',
        end: '2023-03-24T12:30:00',
        color: 'red',
      },
      {
        title: 'test5',
        start: '2023-03-22',
        end: '2023-03-24T18:00:00',
        color: 'black',
      },

    ]}
  />

All the events have the same end date, but they end at different times in the day.

But on the popup they all show as 12:00am.

I've searched all day and can't find a solution.

Answer 1

I'm not sure what the reasoning behind this is, but it seems like 12:00a is the start time of the events on the last day, not the end time.

You can add displayEventEnd={true} as a property on <FullCalendar /> to display the end times.

Here's a codesandbox link.