Events Overlapping Layout Issue

jquense / react-big-calendar

gcal/outlook like calendar component

http://jquense.github.io/react-big-calendar/examples/index.html

MIT License

7.86k stars 2.23k forks source link

Events Overlapping Layout Issue #2645

Open raheel-ahmed-psychplus opened 1 month ago

raheel-ahmed-psychplus commented 1 month ago

If the second event starts right after the first one ends, I want those events to be placed on top of each other without any offset as indicated in the image. I saw that this issue has been raised before (#378) and a PR (#379) was merged to fix the issue. However, in my case, the issue still exists and I am not sure if I am missing something since apparently this should not be happening anymore.

Any help/guidance is appreciated!

matthiaseigner commented 1 month ago

I have done some research and there seems to be a minimumStartDifference that is used to identify overlapping events. https://github.com/jquense/react-big-calendar/blob/d66bd12fc37799b59cd1e6b30dd94eea65e7d62f/src/DayColumn.js#L206

As you can see this is set to Math.ceil((step * timeslots) / 2), so you can influence the value by setting the step and timeslots parameters, but it will always result in a minimum start difference of half your timeslot labels.

raheel-ahmed-psychplus commented 1 month ago

Actually, the issues I linked were related to the day view but I only needed to display the week view. After doing some digging around I found that all I needed to do was pass a dayLayoutAlgorithm prop and set its value as no-overlap and it resolved that issue.