Creating an AJAX-Enabled Calendar Control

ntroduction
Go to any travel or event booking website and you'll find the same user interface for collecting date information: the Calendar. Providing such an interface in an ASP.NET application is a breeze, thanks to the built-in Calendar Web control. There are two downsides to ASP.NET's Calendar control: first, it is not very useful when selecting dates far into the future or past, as you can only navigate to the next or previous month; and, second, the Calendar does not use AJAX techniques, so each click, be it selecting a date or moving to the next or previous month, requires a full postback.

Mehmet Genc addressed this first shortcoming in Extending the Calendar Control's Date Navigation by showing how to add month and year drop-down lists. But Mehmet's article was written in 2004 and since then AJAX-enabled websites have become all the rage. I decided it was high time to update Mehmet's custom Calendar control to support AJAX. Specifically, I implemented the AJAX-enabled Calendar control as a User Control. The User Control renders a TextBox control that, when clicked, displays a Calendar control from which the user can select the date. Like with Mehmet's Calendar, users can quickly jump to a particular month or year by using two drop-down lists. And best of all, the user experience is very responsive.

Read on to learn more!

- continued -

Get the SOA Development Survival Guide Get started understanding the benefits and tools needed for service-oriented architecture development. Includes whitepapers, Webcasts, and articles. » IBM Rational Systems Development Solution eKit As systems increase in complexity, communication between systems and teams becomes more and more difficult. Read the "Model Driven Systems Development" whitepaper to see how to improve product quality. Also included are more whitepapers, customer examples, tutorials, informative Webcasts, and best practices for designing, building, and managing systems. » Webcast: Succeed with Asset-Based Development: Introducing Rational Asset Manager Learn how IBM Rational Asset Manager enables organizations to identify, manage and govern the design, development and consumption of software assets, including services, as part of an SOA initiative. Learn about the key challenges of asset-based development and how IBM Rational Asset Manager can help provide the solutions. » Download: IBM Rational Rose Technical Developer IBM Rational Rose Technical Developer is a robust Model-Driven Development (MDD) solution, expressly created to meet the challenges of complex systems development. Based on UML, Rational Rose Technical Developer provides a highly-automated and reliable solution to the unique problems of concurrency and distribution. »

First Things First: Ensuring Your Environment Supports ASP.NET AJAX
To use this AJAX-enabled Calendar control, make sure your development environment supports the ASP.NET AJAX framework. If you are using Visual Studio 2008, then this framework is already present. If, however, you are using Visual Studio 2005, then you need to download and install the ASP.NET AJAX framework from Microsoft's site, http://www.asp.net/ajax/. For more information on this process, refer to Scott Mitchell's article, AJAX Basics and Getting Started with Microsoft's ASP.NET AJAX Framework.

My AJAX-enabled Calendar control uses the UpdatePanel and PopupControlExtender controls. While the UpdatePanel is part of the framework's "Essential Components," the PopupControlExtender is part of the ASP.NET AJAX Control Toolkit, which is a separate download (even for Visual Studio 2008). If you check out the Control Toolkit samples you'll notice that there's an AJAX Calendar control in the Toolkit. I built my own AJAX-enabled Calendar control instead of using the one in the Control Toolkit because I wanted to add the month/year drop-down lists. Also, there have been a variety of display bugs with the Calendar control (see the AJAX Control Toolkit work item list). I invite you to try out mine and the AJAX Control Toolkit's Calendar and use the one that's best suited for your needs.

Getting Started with My AJAX-Enabled Calendar Control
The complete code for this User Control, along with a sample web page, is available at the end of this article. You should be able to open the folder as a website in either Visual Studio 2005 or Visual Studio 2008.

The Calendar is implemented in the CoolCalendar.ascx file as a User Control. Take a moment to examine the markup in this page. You'll find the following key controls:

1. The DateTextFrom TextBox
2. A RequiredFieldValidator named DateTextFromRequired
3. A Panel control
4. An UpdatePanel control
5. The month and year DropDownList controls
6. The Calendar control
7. An AJAX PopupControlExtender control

Note the onfocus="javascript:this.blur();". This bit of client-side script ensures that whenever the user clicks on the DateTextFrom TextBox, focus is immediately taken away from the control. The idea here - as we'll see shortly - is that whenever the user focuses on the TextBox it is immediately taken away and the Calendar control is displayed. This forces the user to select a date from the calendar. If you remove the onfocus script, the user could enter the date into the TextBox via the keyboard. I find this option undesirable due to the possibility of user entry errors.

The RequiredFieldValidator (item 2) is used to optionally ensure that a date value has been supplied. The User Control contains a Boolean public property named DateTextRequired. Setting this value to True enables the RequiredFieldValidator; setting it to False disables it. By default, the RequiredFieldValidator is enabled.

The AJAX PopupControlExtender control pops up a particular Panel on the page in response to a certain client-side action. The Panel control (item 3) defines the region that is popped up, and includes the UpdatePanel (item 4), the month/year DropDownLists (item 5), and the Calendar control (item 6).

The final piece in the markup page is the PopupControlExtender control (item 7) and is configured to display the Panel (item 3) whenever the DateTextFrom TextBox receives focus. This behavior is dictated entirely through the PopupControlExtender control's properties, there's no need to write any JavaScript or code!