Timeview events multiline

Scheduler
#1

Hi,
is there a mode to render a multiline text inside a Timeview’s event?

https://snippet.dhtmlx.com/g44juf8e

After that is it possible to adapt every row height to its content?

#2

Hi Nicola,
In order for the event to contain several lines, firstly you need to increase the height of timeline event bars.
It’s done using the event_dy property of the createTimelineView method.
You’ll also need to disable resize_events property so scheduler won’t decrease the height of stacked events:

scheduler.createTimelineView({
  event_dy: 63,
  resize_events: false,
   ....
});

When it’s done, you need to redefine scheduler.templates.event_bar_text template, which defines inner HTML of the event bar:
https://docs.dhtmlx.com/scheduler/api__scheduler_event_bar_text_template.html

var dateToStr = scheduler.date.date_to_str("%H:%i, %j %M %Y");

scheduler.templates.event_bar_text = function(start,end,event){
var text = "<div class='timeline_bar_content'>" +
   "<div>"+event.text+"</div>"+
   "<div>Start: "+dateToStr(event.start_date)+"</div>"+
   "<div>End: "+dateToStr(event.end_date)+"</div>" +
   "</div>";
return text;
};

If you want custom overflow rules, for example, truncate long labels with an ellipsis, you can do it with CSS (note that here I use timeline_bar_content class that I defined in event_bar_text template):

.timeline_bar_content {
   white-space: nowrap;
 }
.timeline_bar_content div {
   overflow: hidden;
   text-overflow: ellipsis;
 }

After that is it possible to adapt every row height to its content?

Unfortunately, there is no built-in way to adapt row heigh to its content and it is hard to do it manually.
Here is a demo:
http://snippet.dhtmlx.com/5/b0c152012