timeline issues

Hello - I’m building out some timeline functionality and I’m running into some issues:

  1. When the x_unit is set to day, the second_scale is set to week, and start_on_monday is set to false, the second scale inaccurately breaks the week between Sunday and Monday, instead of between Saturday and Sunday.

  2. Timeline first_hour/last_hour doesn’t seem to be working. I’ve set it up like this, but I always seem to get from midnight to midnight.

scheduler.createTimelineView({ name: "timeline", //to show in place of timeline grid dx: 100, //width of section x_unit: 'hour', x_date: "%g %a", x_step: 1, x_size: timeline_size * 24, x_start: 0, x_length: timeline_size * 24, y_unit: resources, y_property:"unit", render: "bar", event_dy:"full", resize_events:true, first_hour:scheduler.config.first_hour, last_hour:scheduler.config.last_hour, second_scale: { // adding such object to createTimelineView parameters enables second header x_unit: 'day', // size of unit which should be used for second scale x_date: "<span class=hover><a jump_to='" + scheduler.config.api_date + "' href='#'>%j %M</a></span>" //"%F %d" // would be translated to "July 01" for example } });

I’ve also tried this - same result:

[code] scheduler.attachEvent(“onViewChange”, function(new_mode,new_date){
if (new_mode == ‘timeline’) {
scheduler.matrix[‘timeline’].first_hour = scheduler.config.first_hour;
scheduler.matrix[‘timeline’].last_hour = scheduler.config.last_hour;

	return true


I’ve also tried it substituting numbers in place of the config setting.

  1. One of my views has a need to have taller x_scale, so I set this up as a function onViewChange. This mostly works. When I go from the view with the taller height, to a timeline with a second_value, the height changes to the correct height. However, it doesn’t re-render the primary scale, so when the view updates, the primary scale gets hidden, leaving just the secondary scale.

This is the code:

[code]scheduler.xy.scale_height_original = scheduler.xy.scale_height;
scheduler.attachEvent(“onViewChange”, function(new_mode,new_date){
if (new_mode == ‘week_unit’) {
scheduler.xy.scale_height = 60;
} else if (new_mode == ‘timeline’ ) {
scheduler.xy.scale_height = scheduler.xy.scale_height_original * 2;
} else {
scheduler.xy.scale_height = scheduler.xy.scale_height_original;

return true



  1. We’ve confirmed the issue. Please open a ticket in our support system, we’ll send you the fixed version
  2. First/last hour will work only for one-day timelines, try using ‘ignore’ function instead
    docs.dhtmlx.com/scheduler/timeli … eviewcells
  3. I couldn’t reproduce this issue, probably it has been fixed in the latest build as well

The update fixed #1, but #3 is still not working properly. Do you have any recommendations to fix this?

Using this setting works fine the first time we go to timeline.
However, if we change to week_unit, then back to timeline, the timeline is broken, as shown. Do you have any suggestions?


Also, for #2, this only seems to work with timeline x_unit=hour. When used with day or any other x_unit, the timeline breaks. Is there a way to use x_unit=day, for example, and hide non-working hours.


scheduler.ignore_timeline = function(date){ if (date.getHours() < scheduler.config.first_hour || date.getHours() > scheduler.config.last_hour) return true; };

Please see my last two messages. I have not gotten a reply to these yet.

Thank you.

Hi -

I’m revisiting this question - I’m hoping there’s a solution to my problem.

I’m able to set a timeline to only show the workday by using the following code:

scheduler.ignore_timeline_day = function(date){ if (date.getHours() < scheduler.config.first_hour || date.getHours() > scheduler.config.last_hour) return true; };

However, this only works when the x_unit=‘hours’.

I would like to also use this feature when x_unit=‘day’. This will allow us to show a second scale, and still show a limited workday. We’re using this code for our week(s) view.

scheduler.createTimelineView({ name: "timeline_week", dx: 100, x_unit: 'day', x_date: "%j %M", x_step: 1, x_size: 7, x_start: 0, x_length: 7, y_unit: resources, y_property:"unit", render: "bar", event_dy:"full", resize_events:true, second_scale: { x_unit: 'week', x_date: 'Week of %j %M" } });