Replace dhx_event_resize class

Scheduler
#1

Hello,
I need to replace the css classes dhx_event_resize, dhx_event_resize_start and dhx_event_resize_end in order to put an image depending on the event type

I need to do it in the timeline view

for example if event.type == “1” I need to put a black user icon on the left, if event.shift == “2” I need to put an icon with the number 2 on the right

how can I do it?

Thanks

#2

Hello @carlo.sca ,

Basically, you can redefine event classes from the renderEvent method, which is described by the following link:
https://docs.dhtmlx.com/scheduler/custom_events_display.html

But, it’s quite easier to do what you need through usual CSS, the things that you have to do are: return custom classes from the event_class template:
https://docs.dhtmlx.com/scheduler/api__scheduler_event_class_template.html

Code example:

scheduler.templates.event_class = function(start, end, event) {
  if(event.type == 1)
    return "left_image";
  if(event.type == 2)
    return "right_image";
};

and define additional styles for these classes:

<style>
  html, body{
     padding:0;
     margin: 0;
  }
  .left_image .dhx_event_resize.dhx_event_resize_end{
    display: none !important;
  }
  .left_image .dhx_event_resize.dhx_event_resize_start{
    background-image :url(https://upload.wikimedia.org/wikipedia/commons/9/99/Black_square.jpg) !important;
  }
  .right_image .dhx_event_resize.dhx_event_resize_start{
    display: none !important;
  }
  .right_image .dhx_event_resize.dhx_event_resize_end{
    background-image :url(https://upload.wikimedia.org/wikipedia/commons/9/99/Black_square.jpg) !important;
  }
</style>

Here is a demo(HTML/CODE tabs):
http://snippet.dhtmlx.com/5/e586a1202

As you can see, events have a custom(black square) resizers on start/end based on their types.

2 Likes