Styles missing in CalendarExtender

When you put an Ajax Calendar Extender inside of a GridView you will see the calendar without any styling on it meaning the calendar will show only the dates overlapping with other items on your form. Sometimes some dates might even be missing. See the sample appearances below.

This happens because the style sheets are not loaded at the correct time due to a bug in toolkit, there are several ways to fix this.

One is to add another calendar extender outside of the update panel and keep it hidden.

Another is to disable partial rendering in the script manager. But this will slow down your site reducing the benefits gained from AJAX.

1. <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="false" runat="server">
2. </asp:ScriptManager>

My chosen method is to add the styles manually to the style sheet. To move forward this way simply copy the following styles which are used by the calendar extender to your style sheet.

1. .ajax__calendar_container {padding:4px;cursor:default;width:170px;font-size:11px;text-align:center;font-family:tahoma,verdana,helvetica;}
2. .ajax__calendar_body {height:139px;width:170px;position:relative;overflow:hidden;margin:auto;}
3. .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years {top:0px;left:0px;height:139px;width:170px;position:absolute;text-align:center;margin:auto;}
4. .ajax__calendar_container TABLE {padding:0px;margin:0px;font-size:11px;}
5. .ajax__calendar_container TD {padding:0px;margin:0px;font-size:11px;}
6. .ajax__calendar_header {height:20px;width:100%;}
7. .ajax__calendar_prev {cursor:pointer;width:15px;height:15px;float:left;background-repeat:no-repeat;background-position:50% 50%;background-image:url(../images/arrow-left.gif);}
8. .ajax__calendar_next {cursor:pointer;width:15px;height:15px;float:right;background-repeat:no-repeat;background-position:50% 50%;background-image:url(../images/arrow-right.gif);}
9. .ajax__calendar_title {cursor:pointer;font-weight:bold; margin-left:15px; margin-right:15px;}
10. .ajax__calendar_footer {height:15px;}
11. .ajax__calendar_today {cursor:pointer;padding-top:3px;}
12. .ajax__calendar_dayname {height:17px;width:17px;text-align:right;padding:0 2px;}
13. .ajax__calendar_day {height:17px;width:18px;text-align:right;padding:0 2px;cursor:pointer;}
14. .ajax__calendar_month {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
15. .ajax__calendar_year {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
16.  
17. .ajax__calendar .ajax__calendar_container {border:1px solid #646464;background-color:#ffffff;color:#000000;}
18. .ajax__calendar .ajax__calendar_footer {border-top:1px solid #f5f5f5;}
19. .ajax__calendar .ajax__calendar_dayname {border-bottom:1px solid #f5f5f5;}
20. .ajax__calendar .ajax__calendar_day {border:1px solid #ffffff;}
21. .ajax__calendar .ajax__calendar_month {border:1px solid #ffffff;}
22. .ajax__calendar .ajax__calendar_year {border:1px solid #ffffff;}
23.  
24. .ajax__calendar .ajax__calendar_active .ajax__calendar_day {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
25. .ajax__calendar .ajax__calendar_active .ajax__calendar_month {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
26. .ajax__calendar .ajax__calendar_active .ajax__calendar_year {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
27.  
28. .ajax__calendar .ajax__calendar_today .ajax__calendar_day {border-color:#0066cc;}
29. .ajax__calendar .ajax__calendar_today .ajax__calendar_month {border-color:#0066cc;}
30. .ajax__calendar .ajax__calendar_today .ajax__calendar_year {border-color:#0066cc;}
31.  
32. .ajax__calendar .ajax__calendar_other .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff;color:#646464;}
33. .ajax__calendar .ajax__calendar_other .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;}
34.  
35. .ajax__calendar .ajax__calendar_hover .ajax__calendar_day {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
36. .ajax__calendar .ajax__calendar_hover .ajax__calendar_month {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
37. .ajax__calendar .ajax__calendar_hover .ajax__calendar_year {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
38.  
39. .ajax__calendar .ajax__calendar_hover .ajax__calendar_title {color:#0066cc;}
40. .ajax__calendar .ajax__calendar_hover .ajax__calendar_today {color:#0066cc;}
41.  
42. /* styles for invalid dates as defined by startDate and endDate*/
43. .ajax__calendar .ajax__calendar_invalid .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff; color:#646464; text-decoration:line-through; cursor:default;}
44. .ajax__calendar .ajax__calendar_invalid .ajax__calendar_month {background-color:#ffffff;border-color:#ffffff; color:#646464; text-decoration:line-through; cursor:default;}
45. .ajax__calendar .ajax__calendar_invalid .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff; color:#646464; text-decoration:line-through; cursor:default;}
46.   .ajax__calendar .ajax__calendar_invalid .ajax__calendar_today{visibility:hidden; cursor:default;}

Note that the above CSS uses the “arrow-left.gif” and “arrow-right.gif” for the previous and next buttons. If you want, you can use any other image which suits you. In case you need the originals they are below. To correctly show the previous and next buttons you need to place these images on to the “Images” folder under your project. If the folder is different in your project please change the image paths in the above CSS.

• arrow-left.gif -
• arrow-right.gif -

After doing all this remember to link the style sheet to your web page.

1. <link href="Styles/Site.css" rel="stylesheet" type="text/css" />

If you have done everything correctly your calendar will be shown properly while residing inside of the grid.