How To Add A New Property To The AJAX Calendar Control

I've finally gotten around to using something from the AJAX Control Toolkit in an actual project. My client was dissatisfied with the <asp:calendar> control so I offered to AJAX enable the site and replace it with the fancier Calendar control from the ASP.NET AJAX Control Toolkit. Naturally the client found something he wanted to work a little different. This calendar control was for entering your birth date and he did not want the user to scroll back decades to find that date. He wanted the calendar to show up with the 1990-1999 decade already visible so the user could start from there. Fortunately I remembered that the ASP.NET AJAX Control Toolkit comes with all the source code so you can customize it to suite your needs.

This requirement was extremely easy to implement. All you really need to do is set the calendar mode to "years" when you first show it. However there was no property for initial mode so I had to create one. This was virtually a cut and paste hack because there are existing properties to base it on.

1. Open CalendarExtender.cs and create a new ExtenderControlProperty:

   1: [DefaultValue("")]

   2: [ExtenderControlProperty]

   3: [ClientPropertyName("initialMode")]

   4: public virtual string InitialMode

   5: {

   6:    get { return GetPropertyValue("InitialMode", string.Empty); }

   7:    set { SetPropertyValue("InitialMode", value); }

   8: }

2. Open CalendarBehavior.js and create a new member:

   1: this._initialMode = null;

3. Also in CalendarBehavior.js add new get and set functions for the property access:

   1: get_initialMode : function() { 

   2:     /// <value type="String">

   3:     /// The initial mode of the calendar

   4:     /// </value>

   5:  

   6:     return this._initialMode; 

   7: },

   8: set_initialMode : function(value) { 

   9:     if (this._initialMode != value) {

  10:         this._initialMode = value; 

  11:         this.raisePropertyChanged("initialMode");

  12:     }

  13: }, 

4. And finally set the _switchMode in the show : function() with this new line of code:

   1: this._switchMode(this._initialMode, true);

Compile the AjaxControlToolkit project and copy the AjaxControlToolkit.dll file to your bin directory. Now you can use your new property in the Calendar control like so:

   1: <ajaxToolkit:CalendarExtender ID="calendarButtonExtender" runat="server" TargetControlID="Date5" 

   2:             PopupButtonID="Image1" InitialMode="years" />