Custom Timeline View


We have created a custom timeline view with Month on Y axis and Days on X axis:

name: “timelineYear”,
x_unit: “day”,
x_date: “%j”,
x_start: 0,
x_step: 1,
x_size: 31,
render: “bar”,
show_unassigned : true,
section_autoheight: false,
y_unit: monthSections,
y_property : “event_month”,
second_scale : {
x_unit: “year”,
x_date: “%Y”

However, when an event crosses multiple months, lets say from August to September, then it is not displayed correctly

Any ideas on how to correct this behavior?


As I see, you tried to customize ‘Days mode’ of Timeline view to get ‘month mode’ … #viewmodes
It causes difficulties, because this mode works properly only with days on Y scale.

Please try to replicate your issue in the snippet and send me a link, I’ll try to help you somehow.


Hi Polina,
Thanks for this.

What I cannot set in the snippet is the timeline start end dates; it should be a Year timeline but it only shows month of January

scheduler.attachEvent(“onTemplatesReady”, function () { =; = function(date,step){ return, step, "year"); }{ return date, 1, "year"); }

scheduler.templates.timelineYear_scale_label = function (section_id, section_label, section_options) {
       return formatTimelineYearLabel(section_label); 


If I resolve this then we have full reproduction example of the initial issue



If you need to configure X-axis, you need to update values of properties of createTimelineView method, for example:


Hi May I know how you achieve the greyed out cells like for February?


Hi do you know how he achieved the above config? I really need this right now, it’s exactly what I wanted but I can’t seem to replicate this


If you want to color the cells of the required sections, you can use the timeline_cell_class template:{timelinename}_cell_class_template.html ;

You can return a custom CSS class for a cell, based on the date and the section of a cell.
Please check the example of how it might be implemented: