React-big-calendar: Event style: no overlap

[nirchernia]

Hello! Thanks so much for react-big-calendar!

I am wondering if it is possible to have events NOT overlap (in day view). I realize that this could potentially stretch the calendar but that is okay.

Currently the events look like this:

I would like for none of the events to overlap with one another.

Currently my styles are as follows:

eventStyleGetter: function(event, start, end, isSelected) {
    console.log(event);
    var backgroundColor = '#' + event.hexColor;
    var style = {
        backgroundColor: backgroundColor,
        borderRadius: '0px',
        opacity: 0.8,
        color: 'black',
        border: '0px',
        position: 'float',
        display: 'block'
    };


<BigCalendar selectable events={this.state.events} defaultDate={new Date(2016, 3, 1)} style={{height: 800}} onSelectSlot = {this.slotSelected} onSelectEvent={this.eventSelected} eventPropGetter={(this.eventStyleGetter)} />

Any way of styling this to work?

[jquense]

There really isn't any way of doing this in a way that would look ok. Partly because event width is not a fixed thing, and mostly because absolutely positioned elements (the events) can't grow the width of their parent to "fit" the children. Which leaves needing to do an extensive amount of width calculation in javascript, and that would be severely limiting in other ways.

I'd address the issue a different way, perhaps by increasing the z-index of the event as you hover over it so it comes to the forefront?

[nirchernia]

@jquense Thanks for the speedy reply.

How could you alter the z-index on hover? I was under the impression that once rendered, these events couldn't necessarily change/ didn't have hooks for changing. Could you provide a simple example?

In addition, I need a way to display many overlapping events cleanly. The idea is I might have up to 15 events overlapping, and if they overlap it will be hard for users to see exactly what is going on. Given an example with 16 events at the same time, some of the results do not even display:

Any idea on how to solve this? Again, stretching is OKAY if it solves the problem. The calendar can be as large as it needs to be. Clear information is better than pretty.

[jquense]

.my-event:hover {
  z-index: 10000;
}

then:

eventPropGetter() {
  return { className: 'my-event' }
}

Again, stretching is OKAY if it solves the problem

I here you and, that might be fine but thats not actually a tradeoff I can make, as in it's not feasible. There is no way to stretch the calendar to based on the sizes of the events without an extensive amount of flakey javascript, because the events absolutely positioned (required).