search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Month - Changing event background colors

Asked by BarryFz
9 years ago.

I want to be able to change the background color of events depending on the data in the Month control. I am catching the BeforeEventRender event and trying to do this by setting the initial CSSClass property to month_green (in the design properties) then setting CSSClass = "month_blue" for some of the events. Nothing I have tried ever changes anything to blue. What I am seeing is that the CSSClass in <div title... becomes "month_green month_blue". Then the class inside that is still <div class = "month_green_event_inner... If I manually change the month_green_event_inner class to month_blue_event_inner using the ie developer tool then the background changes to blue for that event.

This appears to be a bug to me, but perhaps I am doing something wrong??

Answer posted by Dan Letecky [DayPilot]
9 years ago.

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.

Comment posted by BarryFz
9 years ago.

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.

Comment posted by Dan Letecky [DayPilot]
9 years ago.

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.

Comment posted by BarryFz
9 years ago.

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?

Comment posted by Dan Letecky [DayPilot]
9 years ago.

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.

Answer posted by BarryFz
9 years ago.

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.

Comment posted by Dan Letecky [DayPilot]
9 years ago.

Great, thanks for the update.

Comment posted by Anonymous
8 years ago.

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

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.