In my timeline view I have the scale set to show every 5 minutes between 12/31/1899 19:00 and 1/2/1900 05:00. I set the zone as follows:
scheduler.addMarkedTimespan({
type: "dhx_time_block",
days: "fullweek",
zones: [0, 420, 1140, 1440],
sections: { timeline: [2] }
});
The zone draws a gray area on the right timeline item but between 12/31/1899 19:00 - 1/1/1900 02:00 and 1/1/1900 14:00 - 1/2/1900 02:00. The time should be midnight to 7am and 7pm to midnight each day of the week. What am I doing wrong or is this a bug because my x_start is set to -60 to allow for the starting hour to be 19:00 the previous day?
Also, I tried using a custom css for the Marked and every time it just appears as a dark gray box.
.BreakTime
{
background: #e40101;
filter: alpha(opacity=40);
opacity: .4;
position: absolute;
width: 100%;
z-index: 1;
}
scheduler.addMarkedTimespan({
type: "dhx_time_block",
days: "fullweek",
css: "BreakTime",
zones: [0, 420, 1140, 1440],
sections: { timeline: [2] }
});
UPDATE: Upon further testing I found a solution. I was under the impression that the timeline view was representative of continuous time regardless of the visible date range and scale. Based on that assumption when I specified 0, 420 in my first zone range I expected this to represent 00:00 to 07:00 regardless of the position of the current timeline view. In fact the zones appear to be based on the starting hour of the timeline. Since my offset is 5 hours then all my zone ranges need to be shifted by the same amount in order to lineup with the proper time. Therefore the 0 in my zone actually represents 19:00 and my zone needed to be [0, 720] to cover the correct timespan.
Suggestion, enable the timeline view to support horizontal scrolling with the arrows and the scoll_hours value. The scroll_hours would cover how much time is displayed by the timeline and the user only needs to provide a time_interval and time_interval_type. For example:
scroll_hours = 8;
time_interval = 15;
time_interval_type = “minutes”;
first_scale_visible = false,
second_scale = {
time_interval_type = “hour”,
time_interval_format = “%H:%i”
}
timeline_start_date = new Date(“12/31/1899 19:00”);
This would display a timeline with 8 hours in width showing 15 minute time intervals. When the user clicked the scroll arrows it would move to the next 8 hours from the current block. With these properties the timeline view would be much more powerful and easier to display. I took the liberty of using different names for some of the variables but the idea proposed is the same. I also would recommend an option to hide the first scale. The reason for this option is that I want the grid to display boxes for every 15 minutes but the user only needs to see the hours on the scale.
Thanks
One other thing to note which I did not see in the help file. The CSS property for the addMarkedTimespan() method MUST appear before the type property or the classes will clash and only a solid gray box will appear instead of the custom style.