[ANGULAR] How to find and style overlapping events

[sarahjarmulak]

Hello,

Is there a way to find existing overlapping events and apply a custom style to them?

For example, if there is only one event without other events overlapping, I want it with a blue background, but for events that overlap with different events I'd like a red background/border.

The idea behind this is we need to show the user events that overlap so that the user can see it clearly and take further action later - reschedule events so that they no longer overlap. We'd like to use red color as a "warning sign" in the scheduler. We'd like to do it with an eventLayout: stack.

Thanks in advance,
Sarah

[sarahjarmulak]

By 'overlapping' I mean 'stacked' in this case.

[johan.isaksson]

Hi,

Please take a look at this Scheduler Pro demo https://bryntum.com/products/schedulerpro/examples/taskeditor/. It detects overlap in its eventRenderer, it uses APIs available to the basic Scheduler for that so you should be able to borrow that

overlap.gif (145.9 KiB) Viewed 271 times

This is the most important part of it:

// Highlight overlapping tasks within a resource
if (!scheduler.eventStore.isDateRangeAvailable(task.startDate, task.endDate, task, resourceRecord)) {
    renderData.eventColor = '#f08080';
}

[sarahjarmulak]

That was just what I was looking for, it worked - thank you!