Overlap's algorithm fails with custom timeslots and steps

Do you want to request a feature or report a bug?

Report a bug

What's the current behavior?

Hi,

When trying to show dates by slots of 15 minutes, I noticed some strange behavior: two slots next to each others overlap instead of taking each one a container.

The first slot is from 05:00 to 05:15 and the second one from 05:15 to 05:30.

They should look like this :

This bug can be seen in the following sandbox: https://codesandbox.io/s/react-big-calendar-issue-q8bdq?fontsize=14&hidenavigation=1&theme=dark

What's the expected behavior?

It should work the same way as a 30-minute step does : https://codesandbox.io/s/react-big-calendar-issue-yet7e?fontsize=14&hidenavigation=1&theme=dark

Food for though

I did a little digging in the source and found out that this is the formula that put the two events on the same line: https://github.com/intljusticemission/react-big-calendar/blob/77004e2a51dfa466341e14d2dab35466822d0efb/src/utils/layout-algorithms/overlap.js#L155

In my case, it evals to

 Math.abs(195 - 180) < 30

If I'm not wrong, it should be 15 instead of 30, as my timeslots are 15 minutes long. Therefore I would set minimumStartDifference = step here and call it a day.

https://github.com/intljusticemission/react-big-calendar/blob/77004e2a51dfa466341e14d2dab35466822d0efb/src/DayColumn.js#L197

Workaround

Create a new WorkWeek vue (as seen in the example) and force the dayLayoutAlgorithm to 'no-overlap'

<TimeGrid
      {...rest}
      date={date}
      range={range}
      dayLayoutAlgorithm="no-overlap"
    />

Thanks !