X-axis add more data instead of just date

Scheduler
#1

Hi,

Instead of just dates in the x-axis

we want if possible to have this kind of columns with custom data, something like this:

image
image2503×97 73.4 KB

Is it possible?

Appreciate your reply.

#2

Hi @kjrcoder,

Yes, you can add custom content in these cells with the _scale_date template:
https://docs.dhtmlx.com/scheduler/api__scheduler_{timelinename}_scale_date_template.html

The code may look like follows:

scheduler.templates.timeline_scale_date = function(date){
   let custom_cont = `some content`;
   return custom_cont;
}

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

If you want to add some detailed data, as events occurred at the column, you can get their count with the getEvents method:
https://docs.dhtmlx.com/scheduler/api__scheduler_getevents.html

So it will look like follows:

scheduler.templates.timeline_scale_date = function(date){
   let custom_cont = `cont`;
   let events = scheduler.getEvents(date, scheduler.date.add(date, 1, "day")).length;
   return `${custom_cont} ${events}`;
}

Demo:
https://snippet.dhtmlx.com/7xasr5sy

As I can see, you have also some percentage row - there is no built option to calculate it, so you have to use some custom logic for that.

Kind regards,

#4

@Siarhei i also want to add horizontal line on every 12 AM of the date, is this possible? something like this

image
image2527×1418 127 KB

#5

Hi @kjrcoder,

Yes, you can do it using the timeline_cell_class template:
https://docs.dhtmlx.com/scheduler/api__scheduler_{timelinename}_cell_class_template.html
by drawing this line through CSS, or using some background image(also for CSS), the code may look like follows:

// JS
scheduler.templates.timeline_cell_class = function(evs, date, section){
    let hours = date.getHours();;
    if(hours == 12){
        return "lined";
    }
    return "";
};

// CSS
    .lined{
        background-image: linear-gradient(#000, #000);
        background-size: 2px 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }

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

Kind regards,