CODEWITHSUNDEEP
reactjscalendarfullcalendarreact-big-calendar
ronara
ronara

Reputation: 366

Multiple events in the same time with react big calendar

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?

enter image description here

Upvotes: 4

Views: 3577

Answers (2)

Sujwal Naik
Sujwal Naik

Reputation: 1

If Event are getting overlap you can add

dayLayoutAlgorithm={"no-overlap"}

it will separate every event

Upvotes: 0

Alex Yepes
Alex Yepes

Reputation: 1195

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

Upvotes: 1

Related Questions