I'm working with the Kendo UI for the React Scheduler component and trying to implement a visual distinction for overlapping events. I want to stack overlapping events on top of each other and apply a specific CSS class or style to those overlapped events.
Here's what I'm trying to achieve:
When two or more events share the same time slot, I want them to be visually stacked on top of each other. I would like to apply a unique CSS class or style to the overlapped events to differentiate them from non-overlapping events.
Here's an example scenario:
Event A: 08:00 AM - 10:00 AM
Event B: 09:30 AM - 11:00 AM
In this scenario, Event A and Event B share the time slot from 09:30 AM to 10:00 AM. I would like to style them so that they visually overlap.
The events should look something like below. (Note: The image is only about showing the expected output. Please ignore the details inside the event)
Can anyone provide guidance on how to approach this problem? Are there any specific properties or methods in the Kendo UI for React Scheduler that I can use to achieve this styling behavior? I would greatly appreciate any insights or code examples that could help me achieve the desired result.
Thank you in advance for your assistance!
