Calendar's buggy style handling
Note: this entry has moved.
Antonio, the lead for the graphics design team that’s working on a side project of mine told me today that they weren’t able to get the built-in <asp:Calendar> to work with a css file.
“No problem, let me take a look at it and I will get back to you in 5” was my initial response. After all what can be so difficult about the Calendar? They’re graphics designers with some light training on ASP.NET and not developers, so they must be missing something obvious.
I wrote a simple test page containing a Calendar and included a css file. Ctrl+F5. No luck. The Calendar was rendering whatever it wanted instead of the styles defined in the css file. Revised the aspx file, revised the css. Ctrl+F5. Still no luck.
I google for Calendar’s known bugs but couldn't find much. Moreover, everybody seems to be having the same problems. Time for Reflector.
After a little browsing, I first ended up in Calendar.RenderTitle. In this method a TableCell is being created and applied some default styles:
TableCell cell = new TableCell ();
cell.BackColor = Color.Silver;
Afterwards, the ApplyTitleStyle method is called to apply to the cell and containing table the TitleStyle that was declaratively specified in the aspx; it will also assign the CssClass property (if one was specified):
if (titleStyle.BackColor != Color.Empty) {
cell.BackColor = titleStyle.BackColor;
}
if (titleStyle.CssClass != String.Empty) {
titleTable.CssClass = titleStyle.CssClass;
}
This means that if you have specified in your aspx something like this (which -by the way- makes perfect sense as you’re avoiding the harcoding of styles into the aspx itself):
<asp:Calendar runat=”server” CssClass=”myCalendarStyle” />
You’re *really* out of luck. Why? Because BackColor was set to Color.Silver by default and its going to make it to the rendered html:
<table class=”myCalendarStyle” style=”background-color: silver”>
As you can see the inline style will override our defined myCalendarStyle style and we won’t be able to get our custom background color, never, ever, ever. The only option left is to hardcode it into the aspx:
<asp:Calendar runat=”server” CssClass=”myCalendarStyle” BackColor=”#0044ff” />
Now, we get our background color rendered properly:
<table class=”myCalendarStyle” style=”background-color: #0044ff”>
This is because the previously mentioned ApplyTitleStyle method checked for the specified style and properly applied it to the cell thus overriding the default silver one. Of course this solution is not acceptable unless you’re willing to hardcode styles all over the aspx. Sad.
Even worse is the fact that this bug is not only present in the ApplyTitleStyle method, i.e. the RenderCalendarCell method likes to hardcode a color: black for every rendered cell if no hardcoded color was specified into the aspx. Hello?! I don’t want to hardcode styles into the aspx, that’s why I’m using a css file in the first place!
The morale of the story (and where the bug resides) is:
Don’t ever, ever, ever apply any default styles if a CssClass property is specified. Why? Because that’s rude. I want *my* styles to get rendered and not default ones.
PD1: Of course my initial estimation of 5 minutes to solve the problem was under-estimated by only 300%.
PD2: I just checked the Whidbey bits and this bug is still there :-(