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 !

[FidelisClayton]

I managed to do it by using the dayLayoutAlgorithm:

import overlap from 'react-big-calendar/lib/utils/layout-algorithms/overlap'

// rest of code
     <BigCalendar
        dayLayoutAlgorithm={(params) => {
          return overlap({ ...params, minimumStartDifference: 15 })
        }}
        // rest of props
     />

[coder-guy22296]

We have the same issue where two 15min slots right next to each other with step=5 and timeslots=12 , the bottom one is offset. we traced it down to the same variable: minimumStartDifference. https://codesandbox.io/s/react-big-calendar-issue-m6bew

https://github.com/intljusticemission/react-big-calendar/issues/1192 https://github.com/intljusticemission/react-big-calendar/issues/1440 https://github.com/intljusticemission/react-big-calendar/issues/886

There are multiple GitHub issues that want to tweak this behavior of how close two events start before indenting the second one. We should offer some way to allow users to tweak this behavior. currently, we are patching react big calendar with the following:

-      minimumStartDifference: Math.ceil((step * timeslots) / 2),
+      minimumStartDifference: Math.ceil((step * timeslots) / 4),

would be nicer if we could expose minimumStartDifference as a prop to react big calendar. What do you think @jquense ?

I’m willing to submit a pull request