Overlap's algorithm fails with custom timeslots and steps

[raphaelbadia]

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 !

[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

#1192
#1440
#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

[vAskitsa]

This would be nice. "15 minutes-issue" prevents me almost completely use this component.

[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
     />

[jakiestfu]

@FidelisClayton Just ran into this issue myself and was resorting to patch-package to hardcode 15 in my bundle... Safe to say your solution is in my opinion the correct solution. Just wish it was documented.

[amyplin11]

Are there any updates on this?

[devendrapandey333]

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
     />

@FidelisClayton , I tried your solution but its not working.

minimumStartDifference is set to the same value as the timeslots props value even if i am passing a different value from the dayLayoutAlgorithm Prop

[Canopix]

Hey everyone!

I just wanted to drop a quick note to say thank you for all your help on the react-big-calendar issue with overlapping events. With your suggestions and solutions, I was able to solve the issue by adjusting minimumStartDifference with the overlap function. You guys are awesome, and I really appreciate all the time and effort you put into helping me out.

Thanks again for everything!

[eduardpaul]

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
     />

Thank you @FidelisClayton , you saved our day! We are using Typescript so tslint ignore was also required but the solution works nice :)