React-big-calendar: 🎉🎉 Rearrange algorithm 🚑🚑

[ckcks12]

Do you want to request a _feature_ or report a _bug_?

I want to request a feature. It's related to arrangement of events.

What's the current behavior?

Now, in this calendar, if there are more than two events having same start time, one of them cover the other events and I think it could be imporved by writing new rearrange algorithm.

What's the expected behavior?

It is expected to work as just like Toast UI Calendar.

Furthermore I'd like to to be a contributor for this awesome project. So if you don't mind can I make pull request for this feature? If so, I'm gonna optimize it and also write some explanation too!

Thank you.

=====

See how my algorithm handles plenty of events.

[dmitrykrylov]

@ckcks12 I already created a pull request with similar updates on algorithm. It seems that maintainers didn't treat my proposal as a good solution and haven't approved it.
https://github.com/intljusticemission/react-big-calendar/pull/1405

Please create your pull request and maybe your changes will be merged. I am really interested in solving arrangement issues.

[KhaledMohamedP]

@dmitrykrylov & @ckcks12,

Does your solutions cover stacked events? ref: #1440

[ckcks12]

@KhaledMohamedP
You expect that those events are connected seamlessly? without the 2% padding between them?
I think the padding is not bad actually. The real problem is that they are not arranged properly in horizontal way.

Here's my solution. Mine is also trying to put padding between them. We can find this behavior in Google Calendar.

[ckcks12]

@KhaledMohamedP Btw, I just tested it now (with the version v0.22.1) and it works below.

Is it what you want?

[KhaledMohamedP]

@ckcks12 the issue is not with 30mins appointments, its usually with events shorter than 30 minutes (e.g. 20mins). You will need to change the slot selection to the following

 step={10}
 timeslots={6}

then, you will have to create a set of 20 minutes events in the same hour!

[ckcks12]

@KhaledMohamedP Is this what you want then?

while the original version is like this

[jquense]

@ckcks12 I'd love to see what you came up with. In general we'd really like the arranging algorithm to be pluggable so folks can customize it, but i know that's not super easy to add. Overall We are open to new ways of doing stuff, but there should be good case for why the solution is better generally for people, as a library we need to meet the needs of many different use cases!

Please do feel free to open up a PR with what you've got!

[KhaledMohamedP]

@ckcks12 your solution provides a better alignment algorithm for events around the same time 👏

It also addresses this issue I reported a month ago #1440

Good job!

[Canuckaholic]

My team is also currently facing issues around event arrangement and would love to see this merged! Cheers.

[jbwestphal]

It would be nice having this merged, pls!

[Canuckaholic]

Hey @jquense... love the plug-in, and totally understand if you're too busy to address this PR at the moment. Really appreciate all the effort that's been put into making this one of the best React calendars out there. But... can you let us know if there's no immediate plans to merge this PR or address the arrangement, as we'll need to explore other options for the project that my team is working on. We have a situation where there are quite a few overlapping events, and we just can't use the arrangement out of the box (attaching what it looks like). Thanks again for this library.