Theming the AjaxControlToolkit's Calendar Control
The calendar control that my team is using in our current web application is terrible for three reasons:
- it is ugly. Viewing the control reminds me of the first time I went back to Window's 95 after having upgraded to XP
- it opens the calendar control in a new browser instance (something our users hate)
If I am not mistaken, somehow the control survived the port from classic ASP to ASP.NET 1.1 and then again from ASP.NET 1.1 to ASP.NET 2.0. I have no idea where the control orignally came from, but it is time to get rid of it.
So my latest research tasks was to look into replacing this legacy control with something a little hipper. I took a look at the AjaxControlToolkit's Calendar control to see if it was something we could use. Sure enough it was. It pops the control up without opening a new browser instance, it has a nice transition animation that plays as the user switches between months, and it was designed with visual customization in mind - it can easily be themed using CSS. This last point is great because the only issue my team has with this control is that the default theme is a little boring.
So while looking into how this new date picker control would integrate with our existing application, I also played around with changing the theme to something with a little more flash. Below are a few sample calendar themes. The first theme is one that I based on the YUI calendar control. The second one is based Telerik's RadCalendar control.
Just like when I was working with theming the TabContainer control, before I could create a custom theme, I needed to understand how the CSS classes mapped to the default Vista style calendar. So my first step was to use the IE Developer Toolbar to inspect the HTML and style's that are used for the default Vista style calendar. Here are the screenshots that were the output of this exercise. The regions with the blue border correspond to the class.
After I familiarized myself with the CSS classes, I then used the IE Developer Toolbar again to reverse engineer a few of couple of Calendar controls that I liked. I then went through the process of mapping these styles to the AjaxControlToolkit's Calendar classes. My team is pretty picky, so I doubt we will actually use either of these themes exactly as they appear here, but I figured I would post my work in case anyone can make use of it.
How to Specify a Custom Theme
Described below (taken from here) are the steps that need to be followed to apply a custom theme. You should take note that no matter what the Calendar.css class is pulled to the client the style classes defined in this file will be applied to your custom theme unless you specifically override the values. I found this a little annoying. A couple of times margins, padding or border widths were being taken from the default theme's stylesheet because I wasn't specifically setting them to zero. For me, it worked best to have the default stylesheet handy so I could see what the default styles were.
That's it. Enjoy!