React-big-calendar : day view with time ending at 01am on next days

Question

I'm currently working on a booking system, and I'm using react-big-calendar for that.

The context : an establishment open at 9am and close at 2am (next day) and their client can book from 23pm to 01am.

The goal : display a day view starting at 9am and ending at 2am on the next day

Question : Is it possible to achieve that with react-big-calendar ? If no, does someone know a library I can use ?

I tried

<Calendar
    selectable
    min={new Date(2020, 9, 15, 9, 0, 0)}
    max={new Date(2020, 9, 16, 1, 0, 0)}
    date={selectedDay}
    localizer={localizer}
    defaultView={'day'}
    views={['day']}
    step={30}
    timeslots={2}
    events={events}
    onSelectSlot={handleSelectSlot}
/>

Not working and if an event starts à 23pm and end at 01am, it is marked as allDay event.

Answer 1

You just need to enabled the showMultiDayTimes prop, like:

  return (
    <div style={{ height: 800 }}>
      <Calendar localizer={localizer} events={events} showMultiDayTimes={true} />
    </div>
  );

Here is a sandbox example.