Scheduler Overlapping Events

Scheduler
#1

Hi, I’m using scheduler in timeline view and i just need to colorize the intersection of two events.

photo_2019-10-06_21-11-09
photo_2019-10-06_21-11-091280×161 13.1 KB

For example i want to colorize intersection to the red color.
As stated in this topic Overlapping Events , I use cascade_event_display=true; and i set collision_limit=2. But i can’t colorize intersection. Maybe here is some easy workaround to do this?
I would also like not to change the height of the intersecting elements, if possible. Thanks:)

#2

Hi @Kendzi,

Do you want to colorize this part (i.e. the intersection of two events) red-colored? http://prntscr.com/pgd93l

If so, unfortunately, there is no easy workaround.

Regarding a difficult solution, I will try to describe it below.

You can get collisioned events in onEventCollision API event from the second parameter that is a collection of events’ objects which occupy the same time-slot https://docs.dhtmlx.com/scheduler/api__scheduler_oneventcollision_event.html

Then compare dates to find common part.
To update the bg color not for the whole task, you should put an additional html container into the event bar. There is event_bar_text template for it. And also you should calculate the width of the intersection based on dated and events’ duration to set its value for this container.
https://docs.dhtmlx.com/scheduler/timeline_view_templates.html

The template might look something like this:

scheduler.templates.event_bar_text = function(start,end,event){
     return "<div style='width: " + calculatedWidth + "%'>" + event.text + "</div>";
};

Unfortunately, I can’t do a quick demo for you since it appears to be non-trivial. Hope my explanation will help you to solve this issue.

Regards

#3

Hi @Polina,
Thanks, i think i found a solution for intersection:) But i still don’t figure how not to change the height of the intersecting elements. I tried to set height in class for such elements, but it doesn’t help.

#4

The bottom line is always cropped (i even set config.cascade_event_margin=0; it doesn’t help)
03

#5

@Kendzi,

Please use ‘event_dy’ property to set the required height of events

event_dy - ( number/string )the height of events. Can have the ‘full’ value and occupy the entire cell. By default, equal to scheduler.xy.bar_height-5

More info in the documentation:
https://docs.dhtmlx.com/scheduler/api__scheduler_createtimelineview.html

If that doesn’t help you to solve it - please update the code in the snippet system to reproduce the issue, then click on Share button and send me the updated link.
https://snippet.dhtmlx.com/c84adac42

Regards

1 Like