2

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.

Osanda Gamage
  • 446
  • 2
  • 6
  • 16
Elineo
  • 94
  • 6

1 Answers1

0

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.

Shubham A.
  • 2,446
  • 4
  • 36
  • 68
  • It's been a long time I posted this question (more than 2 years). "showMultidaysTime" is not the response I wanted. The "day view" had to begin at 9am and end at 2am.... – Elineo Dec 22 '22 at 14:40