Popup Calendars with the AJAX Control Toolkit

Posted Wednesday, February 28, 2007 8:49 AM by C-Dog's .NET Tip of the Day

If you haven't had a chance to use the AJAX Control Toolkit in a web application yet, you are really missing out. This is a great set of controls with full source code provided that let you do cool AJAX type stuff with minimal effort. All of them work by extending the funcionality of an existing control such as a textbox or a panel. They are super easy to use. Today I will highlight the use of a simple one.

If you are like me, in the past you have yet to find a nice JavaScript popup calendar that is easy to implement and works flawlessly. Well the CalendarExtender makes it really easy. You simply tell it which textbox to extend and you can choose whether you want to trigger it by clicking on a button or by clicking on the textbox itself.

Here is what the code would look like.

<asp:textbox id="MyDateTimeTextBox" runat="server" />
<asp:image id="MyCalendarImage" ImageUrl="calendar.jpg" />
<ajaxtoolkit:CalendarExtender ID="StartDateCalendarExtender" 
    TargetControlID="MyDateTimeTextBox"
     PopupButtonID="MyCalendarImage" runat="server" />

That is all there is to it. If you don't have the AJAX Control Toolkit installed, there are a few steps to get it ready for use. First make sure you have installed ASP.NET AJAX. Since, it is distributed in source code form, you have to compile the solution to get binaries that you can include. Open the AjaxControlToolkit.sln file and do a compile. The AjaxControlToolkit\bin subfolder will have your binaries that you can include. I recommend adding them to your toolbox to make them easy to use.

Once you get the binaries references in your project, add the following line to the system.web/pages/controls element of your web.config.

<add tagPrefix="ajaxtoolkit" assembly="AjaxControlToolkit" 
   namespace="AjaxControlToolkit"/>

To see a demo of how the calendar works, check out the link below.

AJAX Control Toolkit Calendar Extender

Read the complete post at http://www.dotnettipoftheday.com/blog.aspx?id=339