Timeline view event height adapt to content of the label

Scheduler
#1

Hello
Is there a way to set the label as an html like “Event Name
More Info” for example and the height of the event is set to show this content correclty.
Is in the schduler in a timeline view.

#2

Any way of doing this?

Thanks

#3

Hello @cesar.smerling ,

Regarding this part:

Is there a way to set the label as an html like “Event Name
More Info”

Yes, you can set the event content in the HTML format, with the event_text and event_bar_text templates:
https://docs.dhtmlx.com/scheduler/api__scheduler_event_bar_text_template.html

The code may look like follows:

scheduler.templates.event_bar_text = function(start,end,event){
      return `<div> ${event.text}</div>`;
};

Here is a demo:
https://snippet.dhtmlx.com/h87m16ub

Regarding this part:

and the height of the event is set to show this content correclty.

Unfortunately, there is no option to set some autoheight config, to make event height increase according to the content. But you can set manual height for all events with the event_dy and event_min_dy config of the createTimelineView method, as follows:

scheduler.createTimelineView({
...
  event_dy: 50,
  event_min_dy: 50
});

Here is a demo:
https://snippet.dhtmlx.com/fbz4usx8

Also, you can try the tooltip or quickInfo extension, in order to display additional content on event hover:
https://docs.dhtmlx.com/scheduler/tooltips.html

Kind regards,

1 Like