Month - Changing event background colors

The CssClassPrefix property can be used to apply a css theme. All the internally used css classes will get prefixed by the value of CssClassPrefix. This makes the theme class names unique.

Example:

CssClassPrefix="month_green"

means that event divs will be marked with:

.month_green_event

The e.CssClass property that you can access in BeforeEventRender allows you to add another class to the event div. This class name will not be prefixed.

If you want to make an event blue, you need to add a class to the theme (most styles are defined on _event_inner):

.blueevent .month_green_event_inner {
background: blue;
}

and set e.CssClass = "blueevent" in BeforeEventRender.

OK, I see I can just to background color with that property. But what if I want to change fonts, borders etc, then I need the css.

Yes, using the css is the recommended way to change the event appearance. There are a few other properties accessible in BeforeEventRenderEventArgs, such as e.BackgroundColor, e.BackgroundImage but it only allows you to change selected styles and you still may not be able to override certain styles defined in the theme (especially when trying to change the background color using e.BackgroundColor). See also:

http://forums.daypilot.org/Topic.aspx/1903/scheduler-css-event-background-colours

You can build the custom classes manually (by copying the default theme classes) or generate them in the theme designer: http://themes.daypilot.org/

Then just copy the *_event_inner class from the .css file and rename it.

Sorry, I hadn't refreshed and didn't see your response before my second post. I tried what you said. I added

.blueevent .month_green_event_inner {
background: blue;
}

to the month_green.css file, set the properties CSSOnly = true; CssClassPrefix = month.green

In the BeforeEventRender event I set e.CssClass = "blueevent";

Everything is still green (did a browser cache clear first),

This is what I see in the ie developer tools:

<div title="Beckmann - Private" class="month_green_event blueevent" style="left: 20%; top: 153px; width: 20%; height: 16px; overflow: hidden; position: absolute;" unselectable="on">
<div class="month_green_event_inner" unselectable="on">
Text - Beckmann - Private

Did I miss something?

I have tested it by modifying Month/Default.aspx and Month/Default.aspx.cs from the latest sandbox build (http://www.daypilot.org/sandbox/).

Month/Default.aspx

<style>
.test .month_green_event_inner {
background: blue;
}
</style>

and

<DayPilot:DayPilotMonth ...
CssClassPrefix="month_green"
...

Month/Default.aspx.cs already contains this:

protected void DayPilotMonth1_BeforeEventRender(object sender, DayPilot.Web.Ui.Events.Month.BeforeEventRenderEventArgs e)
{
if (e.Value == "12")
{
e.ContextMenuClientName = "menu2";
e.StaticBubbleHTML = "test";
}

e.CssClass = "test";

}

It seems to work fine (IE 10, Chrome, Firefox).

You can see that the class is properly applied so you should focus on the CSS declaration.

Found it, had to override the filter too. I added this from the month_blue.css

filter: alpha(opacity=50);

I understand it now, just need to figure out how I really want to display it.

Thanks.

Great, thanks for the update.

Thanks its working fine after adding filter: alpha(opacity=50); to css