How to patch the Ajax Control Toolkit CalendarExtender to add Decade support and InitialView – Part 1

This is an educational article intended to show how to enhance the publicly available Ajax Control Toolkit Calendar Extender control.  All code here is added to a fresh download of the Ajax Control Toolkit. All code here is provided under the Microsoft Public Licence.

You can download the code for the latest version (20820) of the Ajax Control Toolkit from here: http://www.codeplex.com/AjaxControlToolkit

The licence is available here: http://ajaxcontroltoolkit.codeplex.com/license

In this case, I am intending to improve the usability of birthdate selection.

Currently, when the user wants to enter a birthdate into the text box attached to the Calendar Extender control, they click in the text box, or click on the calendar image next to the text box. The calendar extender control then pops up a Day view, as follows:

Calendar Extender Day View

Calendar Extender Day View

But we want a birthdate, so you don’t want to select a day here as it will potentially be from the wrong month or year, so what you do to select a different month is to click on the Title bar. That’s the bit that shows “April, 2009”. The calender extender control then pops up the Month view, as follows:

Calendar Extender Month View

Calendar Extender Month View

Next, you want the year, so you click on the Title bar again. That now shows “2009”. The calendar extender control then pops up the Year view, as follows:

Calendar Extender Year View

Calendar Extender Year View

Ok, so say we want 26 May 1970. We now need to choose a different decade. But clicking on the title doesn’t allow you to select a new decade. Instead, you need to use the arrows to go forward or backwards between decades. So you would click the left arrow in the top left corner 3 times to get to the decade that you want, the 1970s, as follows:

Calendar Extender 1970-1979 year view

Calendar Extender 1970-1979 year view

Then you need to click on the year you want, 1970. On selection, it switches back to the month view. You click the month that you want, May, then it switches to the Day view. You can then select the day that you want, 26. On selecting this, the calendar closes, and the text box is populated with 26/05/1970 (or whatever your date format is for the selected region and setting in the calendar extender). That’s a lot of work to select a birthdate.

That’s a total of 9 mouse clicks. Using this innovation, I have managed to get this down to 4 mouse clicks.

Click here for Part 2 >>

3 Responses to How to patch the Ajax Control Toolkit CalendarExtender to add Decade support and InitialView – Part 1

  1. […] How to patch the Ajax Control Toolkit Calendar Extender control to show a Quarter view In this series of educational articles, I am demonstrating how you might enhance the Calendar Extender control found in the publicly available Ajax Control Toolkit. All code here is an extension of my previous work, which was to enhance the Ajax Control Toolkit Calendar Extender so that it could be better utilised to select a birthdate. It introduced the decade view, and also allowed the setting of a initial view of the control, which can be Day, Month, Year and Decade. That article is available here: https://tonesdotnetblog.wordpress.com/2009/04/15/how-to-patch-the-ajax-control-toolkit-calendarextend… […]

  2. […] How to patch the Ajax Control Toolkit Calendar Extender control to show a Month, MonthYearDecade, YearDecade and Decade view In this series of educational articles, I am demonstrating how you might enhance the Calendar Extender control found in the publicly available Ajax Control Toolkit. All code here is an extension of my previous work, first of which was to enhance the Ajax Control Toolkit Calendar Extender so that it could be better utilised to select a birthdate. It introduced the decade view, and also allowed the setting of a initial view of the control, which can be Day, Month, Year and Decade. That article is available here: https://tonesdotnetblog.wordpress.com/2009/04/15/how-to-patch-the-ajax-control-toolkit-calendarextend… […]

  3. […] How to patch the Ajax Control Toolkit CalendarExtender to add Decade support and InitialView – Par…  […]

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: