Differnt colors for Gantt tasks

Some themes use a gradient event background defined using "background" CSS style (scheduler_white, scheduler_green). The e.BackgroundColor translated into an inline "background-color" and this property is not able to override "background" style. You have to either modify the theme not to use the gradient (remove "background: ....") or use a custom CSS class for coloring the events (e.CssClass in BeforeEventRender).

Hello Dan,
thanks for the answer.
I created a new CSS class and set the class name in the BeforeEventRender event of the DayPilotScheduler (e.CssClass). The only thing that changed is that I will get an additional border around the task bar, but the bar itself stays in the original green color. What property have I to use to change the color of the bar itself? Maybe it is possible for you to post a small example of such a CSS class which sets the color to blue instead of green? I tried several things, but unfortuanatly without success. Sorry to bore you with such a problem.
Thanks for your help in advance.

Let's take the scheduler_green theme.

Each event consists of two divs: outer and inner.

* The outer one is marked with .scheduler_green_event class.
* The inner one is marked with .scheduler_green_event_inner class.

If you specify e.CssClass it will be added to the outer div (in addition to the .scheduler_green_event class).

The green theme uses the inner div to set the background color:

.scheduler_green_event_inner  
{
	margin-right: 1px;
	font-size: 12px;
	color: #ffffff;
	padding: 4px;
	
	color: #ffffff;
	background: #a2c200;
	background: -moz-linear-gradient(
		top,
		#a2c200 0%,
		#8aaa00);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#a2c200),
		to(#8aaa00));  
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#a2c200", endColorStr="#8aaa00");
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #7cb316;
	-moz-box-shadow:
		0px 2px 3px rgba(000,000,000,0.3),
		inset 0px 0px 2px rgba(255,255,255,0.8);
	-webkit-box-shadow:
		0px 2px 3px rgba(000,000,000,0.3),
		inset 0px 0px 2px rgba(255,255,255,0.8);
	box-shadow:
		0px 2px 3px rgba(000,000,000,0.3),
		inset 0px 0px 2px rgba(255,255,255,0.8);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,1);
}

If you use e.CssClass = "red" in BeforeEventRender you should add the following to the theme:

.red .scheduler_green_event_inner 
{
	border: 1px solid #c00004;
	background: #ab0000;
	background: -moz-linear-gradient(
		top,
		#ff2819 0%,
		#ab0000);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ff2819),
		to(#ab0000));
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff2819", endColorStr="#ab0000");
}

If you want to use just e.BackgroundColor you need to update the style as follows (remove the "background:" section):

.scheduler_green_event_inner  
{
	margin-right: 1px;
	font-size: 12px;
	color: #ffffff;
	padding: 4px;
	
	color: #ffffff;
	background-color: #a2c200; /* the default color, no gradient */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #7cb316;
	-moz-box-shadow:
		0px 2px 3px rgba(000,000,000,0.3),
		inset 0px 0px 2px rgba(255,255,255,0.8);
	-webkit-box-shadow:
		0px 2px 3px rgba(000,000,000,0.3),
		inset 0px 0px 2px rgba(255,255,255,0.8);
	box-shadow:
		0px 2px 3px rgba(000,000,000,0.3),
		inset 0px 0px 2px rgba(255,255,255,0.8);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,1);
}

Please let me know if it still doesn't help.

Hello Dan,
thnk you very much for the great support. Now everything is working like I expected it and I understood now the configuration via the css.

Once again thanks.

Georg