Replace dhx_event_resize class


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?



Hello ,

Basically, you can redefine event classes from the renderEvent method, which is described by the following link:

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:

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:

  html, body{
     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( !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( !important;

Here is a demo(HTML/CODE tabs):

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