X-axis add more data instead of just date


Instead of just dates in the x-axis

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

Is it possible?

Appreciate your reply.

Hi @kjrcoder,

Yes, you can add custom content in these cells with the _scale_date template:

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:

If you want to add some detailed data, as events occurred at the column, you can get their count with the getEvents method:

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}`;


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,

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

Hi @kjrcoder,

Yes, you can do it using the timeline_cell_class template:
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
        background-image: linear-gradient(#000, #000);
        background-size: 2px 100%;
        background-repeat: no-repeat;
        background-position: center center;

Here is a demo:

Kind regards,