search

jquense / react-big-calendar

gcal/outlook like calendar component
http://jquense.github.io/react-big-calendar/examples/index.html
MIT License
7.77k stars 2.22k forks source link

Weird layout when combining multiple long events and multiple short events #1714

Open mikeyyyzhao opened 4 years ago

mikeyyyzhao commented 4 years ago

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

Bug

What's the current behavior?

For 15 min intervals, when you combine long and short events together, the short events truncate and start a weird ladder. The top pic is from react-big-calendar and the bottom picture is from google calendar.

Screenshot 2020-07-29 11 01 16 Screenshot 2020-07-29 11 01 20

I've tried #1530 's solution of setting dayLayoutAlgorithm but it didn't fix this issue either.

Setup: step=15 and timeslots = 4 for 15 min intervals

You can also replicate this using the dnd calendar on the official site Screenshot 2020-07-29 17 08 57

What's the expected behavior?

There's no ladder when displaying shorter events alongside longer events. The successive short events should be aligned in the center fo the long event

JakubSirek commented 3 years ago

I have the same problem. With settings: step=30 and timeSlots=2. The problem does not occur when the two events overlap, but there is a problem with the third. Same problem for day, week and workWeek view.

Correct behavior when two events overlap: correct

Bug when I add the "Test8" event, which is the third overlap: bug

mikeyyyzhao commented 3 years ago

Any suggestions on how to fix this?

JakubSirek commented 3 years ago

I read some bugs here and tried to use their solution, but nothing helped. It's a bug.

Previously, the same problem manifested itself in the second level, where it is now fixed. The same fix is needed for the third level of events.