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.

Developing iPhone and Android Applications using C# .Net

Being a .Net developer did you think how great if you could develop applications for most popular mobile device platforms like iPhone and Android with the .Net skills you already have. If you were thinking like me then the wait is over.

Now with Mono you can create cross platform applications using your .Net framework skills. Mono is a software platform using which you can develop applications which runs on iPhones, Android devices, iPads and iPod Touches.

As per the Mono site, “The Mono Project is an open development initiative sponsored by Novell to develop an open source, UNIX version of the Microsoft .NET development platform.” If you are wondering about the name Mono, it is 'monkey' in Spanish.

You can try Mono for free by downloading the trial by going to the trial link. The good thing is after installing Mono you can use the more familiar Visual Studio to do the development using the available Mono templates.

Unable to start debugging on the web server

Recently a set of developers who are working in one of my projects started getting an error while trying to debug the web application under development using ASP.Net. The targeted framework was .Net 4.0 and they were using Visual Studio 2010 in 64bit machines. The problem was whenever they tried to run/debug the application they gets an error saying unable to start debugging on the web server even though there are no compile errors as shown below.

It gave an error HTTP Error 500.21 - Internal Server Error Handler "PageHandlerFactory-Integrated" has a bad module "ManagedPipelineHandler" in its module list when ran direct from IIS. The error page is shown below.

Later I found the reason for this is ASP.Net 4 was not properly installed on the machine. To fix this get an administrative privileged command prompt.

Then type in the following,

aspnet_regiis -ir

You can find the aspnet_regiis.exe at the folder,

[Windows Dir]\Microsoft.NET\Framework64\v4.0.xxxxx

for example,

C:\Windows\Microsoft.NET\Framework64\v4.0.30319

This will register ASP.Net 4.0 in your machine, the -ir option will keep the existing applications unchanged. If you want them to be changed to use the new version use -i instead -ir.

When the installer ends type iisreset to restart the IIS service.

Now your applications will work fine without any complains.

.Net Micro Framework

Microsoft has released a beta developer kit of .net Micro Framework which can be used to develop applications for the smallest of devices which are constrained in cost, memory, processor and/or power consumption.

Would like to know more?
http://www.microsoft.com/presspass/press/2006/sep06/09-26MicroFrameworkDKPR.mspx
http://www.aboutnetmf.com/entry.asp