Custom Timeline View

Scheduler Javascript
#1

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

scheduler.createTimelineView({
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,
round_position:true,
dy:40,
y_unit: monthSections,
y_property : “event_month”,
second_scale : {
x_unit: “year”,
x_date: “%Y”
}
});

August Event.png1614×529 11.4 KB


However, when an event crosses multiple months, lets say from August to September, then it is not displayed correctly
August to Sept Event.png1589×529 8.92 KB

Any ideas on how to correct this behavior?
Thanks

#2

As I see, you tried to customize ‘Days mode’ of Timeline view to get ‘month mode’
docs.dhtmlx.com/scheduler/timel … #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.

#3

Hi Polina,
Thanks for this.

http://docs.dhtmlx.com/scheduler/snippet/c8b3a679

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 () {

    scheduler.date.timelineYear_start = scheduler.date.year_start;		
scheduler.date.add_timelineYear = function(date,step){ return scheduler.date.add(date, step, "year"); }
scheduler.date.get_timelineYear_end=function(date){ return scheduler.date.add( 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

#4

Hi,

If you need to configure X-axis, you need to update values of properties of createTimelineView method, for example:
docs.dhtmlx.com/scheduler/snippet/1516ac03

#5

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

#6

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

#7

Hello,
If you want to color the cells of the required sections, you can use the timeline_cell_class template:

https://docs.dhtmlx.com/scheduler/api__scheduler_{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:
https://snippet.dhtmlx.com/1eugq0vs