How to add text to the time event_header times

Scheduler Javascript
#1

I am trying to add additional text to the time section (section that says “10:00-11:00” and etc) Is there a way I can target each of the times to add to their labels? I saw that scheduler.templates.event_header will log the html for it, but that’s about as far as my understanding has gone.

#2

Hello @j64 ,

Could you please clarify which view you are using?

And on which exact place you want to change the date in the lightbox header, event header, scheduler header or somewhere else?

Kind regards,

#3

Hello. The terminology gets a bit confusing for me sometimes, but I was able to add to the time labels by using this logic

this.scheduler.templates.event_header = function (e, t, i) {
      const start = new Date(e);
      const end = new Date(t);
      return moment(start).format('H:mm') + ' - ' + moment(end).format('H:mm') + ' ' + [INSERT NEW STRING TEXT];
    }

It was the day based view, so the schedule for a given day. The above worked for me but if there are more “proper” ways to accomplish this, I’m happy to hear them.

#4

Hello @j64,

Oh, so you wanted to add customize the event_header with additional text. If so, your approach is correct, it also can be modified using template literals syntax, like follows:

scheduler.templates.event_header = function(start,end,ev){
    let customText = "Custom text";
    return `
    ${scheduler.templates.event_date(start)} 
    - 
    ${scheduler.templates.event_date(end)}
    ${customText}
    `;
};

Here is a demo:
https://snippet.dhtmlx.com/zah4wxu5?mode=wide

Anyway, your approach is also correct and shouldn’t cause any issues.

Kind regards,

#5

That way of laying it out is good additional information to know. Thanks for answering!