Using days coloring with time step

I am trying to set timesteps of 15 min and days coloring for showing when are the office closing times. The coloring days works for all timesteps but it gets weird for 15 minutes where the afternoon hours also become colored. I am using the sample code show below.

<style type="text/css" media="screen">
	html, body{
	/* Important !!! */
	.dhx_scale_holder_now.custom_color, .dhx_scale_holder.custom_color{
		background-position:0px -252px;

<script type="text/javascript" charset="utf-8">
	function init() {
		var step = 15;
		var format ="%H:%i");
		scheduler.templates.hour_scale = function(date){
			for (var i=0; i<60/step; i++){
				html+="<div style='height:21px;line-height:21px;'>"+format(date)+"</div>";
				date =,step,"minute");
			return html;
			return "custom_color";	
		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		scheduler.init('scheduler_here',new Date(2010,0,10),"week");

Is there a way of correcting this?

Not quite sure what is the problem ( maybe some screenshot ? ), but in case of day|week view the coloring is fully depends on the bg image


you can replace it with any custom one.

I have attached the screenshots. As you can see the coloring is for the time which is not intended

You need to alter - …/common/hour_bg.png
This file is bg image, which has coloring for all time slots

Yes i am looking at the hour_bg file and i see it has 12 rows of darker color which represent off hours and 12 rows of lighter colors which represent normal working hours. But when I look in the scheduler the 12 dark colored rows are distributed as 6 on top of the scheduler and 6 at the bottom. I am not sure how the image is being rendered. I have tried to edit the hour_bg file as shown in the attached file. Just in case if you can see it easily there are 12 of dark color rows followed by 24 rows of lighter color and then again 12 rows of darker color. This results in the scheduler looking like the pic attached.

Hello, hermit.

Is the issue still actual?
I’ve looked at your hour.png background image and it consists of:
12 yellow lines,
24 light
12 yellow at the bottom
2016 pixels in total. Picture is displayed in scheduler without any artifacts.
0-6 and 18-24 hours are marked with yellow lines.

It seems you had an image half the size that was needed to display it in 1:1 ratio. So it was simply duplicated by the browser to fill whole div:
12 yellow original image
12 light original image
12 yellow duplicate
12 light duplicate

Best regards,

The image size i created was 2016x1 pixels. So can you just tell me how should i create the image file so that I get the correct representation when the time step is for 15 minutes. 12 Color 24 light 12 color schema doesnt seem to work.


12 Color 24 light 12 color schema doesnt seem to work.

What hours do you want to highlight in yellow that way?
Right now it is 00-06, 18-24 and it looks quite fine.

Best regards,

I have attached the screenshot for the 122412 schema. In this the color is from 0-3 and then 15-24. and as you mentioned I am trying to get it to 0-6 and 18-24


You don’t need to use following styles:

/* Important !!! */ .dhx_scale_hour{ line-height:normal; } .dhx_scale_holder_now.custom_color, .dhx_scale_holder.custom_color{ background-image:url(../common/hour_bg.png); background-position:0px -252px; }
Simply backup hour_bg.png file and replace it with yours background (so rename it and place in the same folder).
You can do so because day and week view coloring is fully depends on the bg image


I believe this negative background-position was giving you troubles and I on the other hand simply replaced the file and got your expected result.

Hope it helps.

Best regards,

yup the background positioning was the culprit. Thanks a lot.