Truncated date row in AjaxControlToolkit CalendarExtender

Recently I and a friend have been moonlighting building an ASP.NET web site. This was our first time using C#, and my first time doing any real work in Visual Studio.

I'm no Microsoft lover (I ran Visual Studio in a VM on my Linux laptop), but I have to admit Visual Studio is slick. It's light (compared to Eclipse, at least), its autocomplete is great, and the code-deploy-test cycle is gratifyingly quick.

To my surprise, I quite liked C#. Properties, delegates and var foo = new Bar() alone would make it better than Java, but its lambda expressions simply blow Java away. The only catch with lambda expressions that I could see is that you can't declare a Func that returns void (Func). You either have to declare a delegate, or make the poor Func return a junk object just to keep the compiler happy.

One of the things I needed in this web app was to use date choosers. A little Googling suggested that the AjaxControlToolkit's CalendarExtender control was the way to go. It took me a while to figure out how to actually use it in a page after including the assembly reference in the project. This involved:


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>


and then attaching a calendar extender to a date input text field as:


<asp:TextBox ID="SomeDate" runat="server" />
<ajaxToolkit:CalendarExtender ID="SomeDateCalendar"
TargetControlID="SomeDate" runat="server" />


This worked great, right up until I noticed that the date chooser was missing the last row of dates, pretending that every month had 28 days or less. I checked the example project for the date chooser, and the date chooser looked fine there, so I guessed that the AWOL last row involved something in my webapp's CSS. After some mad Googling for a quick fix, and much cursing, I decided to investigate the matter with Firebug, which revealed that the calendar was likely barfing on the extra padding and margins that the page's CSS used for divs and table cells.

For posterity, here's the CSS style I had to add to my page to make the calendar behave correctly:


.ajax__calendar * {
font-family: "Tahoma", "Verdana", "Helvetica", "Sans-Serif";
padding: 0;
margin: 0;
}


(This is probably a bug in the calendar's own CSS - it should certainly reset margins and padding if it doesn't want it.)