Multiple events in the same time with react big calendar

Question

When I have a lot of events at the same time on the day or week view, they are too small and hiding each other.

Is there a way to expend the hour height and show all of the event one below another or maybe change hour width?

Answer 1

You can use the step prop to set the duration of the slot, and the timeslots prop to set the number of slots:

 <Calendar
     components={components}
     events={cal_eventsAdmin}
     onSelectSlot={this.handleSelect}
     step={15}        // duration of the slot       
     timeslots={4}    // number of slots within an hour
     defaultView="day"
     views={["month", "day"]}
     defaultDate={new Date()}
     localizer={localizer}
     min={new Date(2019, 10, 0, 8, 30, 0)}
     max={new Date(2019, 10, 0, 15, 0, 0)}
 />

In this example you will see 4 slots for every hour, each slot with a 15 minute duration. I guess that in your case, you could increase the number of slots, which will give you more space within one time and another