I was recently working on a GridView and needed to add a calendar for two of the columns while in edit mode. I added the AJAX CalendarExtender and it returned the selected date with no issues.
<EditItemTemplate >
<asp:TextBox ID="txtDate1" runat="server" Text='<%# BIND("Date1", "{0: MM/dd/yyyy}") %>'></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate1" PopupPosition="Right" CssClass="caltheme" >
</cc1:CalendarExtender>
</EditItemTemplate>
However it only displayed three columns of dates so unless you needed a Sunday, Monday or Tuesday you were out of luck. This issue lied with the CSS I had used on the GridView overriding the CalendarExtender style. In my case I had:
.searchGridView td
{
padding-right: 15px;
padding-left: 15px;
padding-bottom: 5px;
padding-top: 5px;
text-align: center;
}
to keep the cells in a nice readable fashion. If I set the various padding settings back to 0px the CalendarExtender looked how it should. But then the data in the GridView’s cells was to close together. So I copied in the default AJAX styles of the CalendarExtender into the project’s css file and added .caltheme to the lines to keep them all grouped together (i.e. .caltheme .ajax_calendar_container, etc.). Still no luck, the calendar continued to show only three columns.
To make the CalendarExtender behave properly I added some more to the .caltheme that focused on the rows and cells. The lines that fixed my issue were:
.caltheme tr td {padding:0;margin:0; background-color:White;}
.caltheme td:hover { background-color:Aqua;}
After that the calendar rendered properly.