Having issue using Block time in Timeline view

Before Explain my new issue , i would like to thank ilya for the replies.

i have a timeline view that has x_view MINUTES. i am trying to bind the Block time that is from 12 am to 8 am and 6 pm to 12 pm for Current day.but the issue i am seeing is that it is getting blocked for the Whole day.

Looking for a quick reply.



So what’s your timeline configuration? And please provide line you use to block time.

For example, in the sample
we as well use “minute” for timeline configuration but if we change first block to
scheduler.addMarkedTimespan({start_date: new Date(2012,7,6,0), end_date: new Date(2012,7,6,15), css: “red_section” });
it would block specified time correctly, from 00 till 15.

Best regards,


scheduler.createTimelineView( {
name: “timeline”,
x_unit: “minute”,
x_date: “%h:%i %a”,
x_step: 15,
x_size: 16,
x_start: startMin > 80 ? 80 : startMin,
x_length: 96,
y_unit: sectionsBystaff,
y_property: “sectionBystaff_id”,
section_autoheight: false,
fit_events: false,
dy: 75,
render: “bar”
} );

This is my timeline Configuration.

scheduler.addMarkedTimespan({start_date: new Date(2012,7,6,0), end_date: new Date(2012,7,6,15), css: “red_section” });

but i need to block for the period of 12 am t0 8 am and from 6pm to 12pm.

Basically the sections will have time interval in their work hours.


scheduler.addMarkedTimespan({days: new Date(2012,7,6), zones: [0,720,1080,1440], css: "red_section" });

Best regards,

Yes. i tried exactly the same…, But it works in all Unit view,Not in the timeline view.

it blocks the Whole day in timeline view.

Full sample:


<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="../../codebase/ext/dhtmlxscheduler_limit.js" type="text/javascript" charset="utf-8"></script>
<script src='../../codebase/ext/dhtmlxscheduler_timeline.js' type="text/javascript" charset="utf-8"></script>

<style media="screen">
	html, body {

	.red_section {
		background-color: red;
		opacity: 0.25;
	.yellow_section {
		background-color: #ffa749;
		opacity: 0.25;
	.green_section {
		background-color: #12be00;
		opacity: 0.25;
	.blue_section {
		background-color: #2babf5;
		opacity: 0.27;
	.pink_section {
		background-color: #6a36a5;
		opacity: 0.30;
	.dark_blue_section {
		background-color: #2ca5a9;
		opacity: 0.40;
	.dots_section {
		background-image: url(data/imgs/dots.png);
	.fat_lines_section {
		background-image: url(data/imgs/fat_lines.png);
	.medium_lines_section {
		background-image: url(data/imgs/medium_lines.png);
	.small_lines_section {
		background-image: url(data/imgs/small_lines.png);

<script charset="utf-8">
	function init() {
		scheduler.config.multi_day = true;
		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		scheduler.locale.labels.timeline_tab = "Timeline";

		var sections=[
			{key:1, label:"James Smith"},
			{key:2, label:"John Williams"},
			{key:3, label:"David Miller"},
			{key:4, label:"Linda Brown"}

			name:	"timeline",
			x_unit:	"minute",
			x_date:	"%H:%i",
			x_step:	30,
			x_size: 24,
			x_start: 16,
			x_length:	48,
			y_unit:	sections,
			y_property:	"section_id",

			{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
			{name:"custom", height:23, type:"select", options:sections, map_to:"section_id" },
			{name:"time", height:72, type:"time", map_to:"auto"}

		scheduler.addMarkedTimespan({days: new Date(2012,7,6), zones: [0,720,1080,1440], css: "red_section" });
		//scheduler.addMarkedTimespan({start_date: new Date(2012,7,6,0), end_date: new Date(2012,7,6,15), css: "red_section" });
		scheduler.addMarkedTimespan({start_date: new Date(2012,7,7), end_date: new Date(2012,7,8), css: "fat_lines_section" });
		scheduler.addMarkedTimespan({start_date: new Date(2012,7,11), end_date: new Date(2012,7,12), css: "yellow_section" });
		scheduler.addMarkedTimespan({start_date: new Date(2012,7,12), end_date: new Date(2012,7,13), css: "dots_section" });

		scheduler.addMarkedTimespan({start_date: new Date(2012,7,13), end_date: new Date(2012,7,14), css: "green_section" });
		scheduler.addMarkedTimespan({start_date: new Date(2012,7,14), end_date: new Date(2012,7,15), css: "medium_lines_section" });
		scheduler.addMarkedTimespan({start_date: new Date(2012,7,18), end_date: new Date(2012,7,19), css: "blue_section" });
		scheduler.addMarkedTimespan({start_date: new Date(2012,7,19), end_date: new Date(2012,7,20), css: "small_lines_section" });

		scheduler.init('scheduler_here',new Date(2012,7,6),"week");
			start_date: new Date(2012,7,9,1),
			end_date: new Date(2012,7,9,3),
			text: "Navigate to the next week to check more examples"
[/code] Original 3.5 version, blocks time correctly on timeline view.

Best regards,

This is my code.

scheduler.addMarkedTimespan( {
days: new Date( availablityModel.currentDay),
zones: [0,10,15,20],
css: “gray_section”,
type: “dhx_time_block”,
sections: { timeline: 100, Resources: 100 }
} );

Getting the proper unit view with the Block time.

this is my timeline view i am getting… What will be the reason for that block time is coming as same as in unit view?

Looking for a quick reply…

Is that bug or what?

I have fixed my issue., Working properly.

I have the same problem. How did you resolve?

For all the ones who has the same problem… chek that the script include.
dhtmlxscheduler_limit.js should be included BEFORE dhtmlxscheduler_timeline.js