Changing the ASP.NET AJAX Control Toolkit Calendar display mode

29Oct07

The ASP.NET AJAX Control Toolkit’s Calendar (Click Here To See The CalendarExtender Control In Action) is a very nice control that allows you implement a client side dynamic calendar for date-picking functionality. One interesting feature is the ability to change the calendar from the default “days” mode (shows the days in one month) to “months” mode (showing all of the months in the current year) by clicking on the calendar title. Another click on the title will change the calendar into “years” mode, which shows 12 years at a time.

One feature that would be nice is the ability to start the calendar control in any of the desired modes (“days”, “months”, or “years”) depending on the type of interaction with the calendar that is most appropriate. For example, a current project of mine requires entering employee hire dates — which are almost always at least a few years old.

The following is some simple code that allows you to get the desired functionality (in this case, we switch to the “years” mode) by handling the Calendar’s OnClientShown event.

Step 0 — The initial Calendar control hooked up to a TextBox

<asp:TextBox ID="txtTitleLength" runat="server"></asp:TextBox> 
<AjaxControlToolkit:CalendarExtender ID="calTitleLength" runat="server"
TargetControlID="txtTitleLength"> 
</AjaxControlToolkit:CalendarExtender>

Step 1 — Add a callback to the OnClientShown event (here: “calendarShown”)

<asp:TextBox ID="txtTitleLength" runat="server"></asp:TextBox> 
<AjaxControlToolkit:CalendarExtender ID="calTitleLength" runat="server"
TargetControlID="txtTitleLength"
OnClientShown="calendarShown"> 
</AjaxControlToolkit:CalendarExtender>

Step 2 — Handle the OnClientShown event (which takes 2 parameters: “sender, e”) and then call the calendar control’s _switchMode() method

function calendarShown(sender, e) { sender._switchMode("years"); }

That’s all there is to it! One note: you must call the switchMode() method in the OnClientShown event and not the OnClientShowing event for the effect to work properly.


Advertisements


14 Responses to “Changing the ASP.NET AJAX Control Toolkit Calendar display mode”

  1. 1 techind

    thank you.
    what do you think scott? can i change the view of calendar to another language like farsi?
    with regards.
    techind@gmail.com

  2. 2 kranti

    I came up with another problem in Ajax Calendar Control. Is it possible to just display months in the Ajax Calendar control. I mean, I dont want to display the dates, I just want to display the months. Is there any property in Calendar control which sets the visibility of the Date to False.

  3. 3 kranti

    This works for me, it is a wonderful article.

  4. 4 kranti

    I have another question in the calendar control. when I use this control it works for me. But I dont want to display the date. What I mean is if the user selects a particular month, I want to set the date of that particular month to the end of the date. Suppose, user selects November month in the control then I dont want to show the dates, instead of that I just want to pop the textbox with the date 11/30/2008. Is this possible with the calendar control. Any help is appreciated.

    Thanks
    kranti

  5. hello it is test. WinRAR provides the full RAR and ZIP file support, can decompress CAB, GZIP, ACE and other archive formats.
    kfkioiitmipnibxmjevbxudpqylqvfvzgajhello

  6. Thanks a lot mayn, this is wat I was looking for.
    Kewl

  7. 7 Hazarath

    I need a calender control like this

    < >

    when i click 1st arrow the year has to change 2009
    and the last arrow is 2011

    the middle two has to be month changing
    can any 1 help me

  8. 8 Hazarath

    <>

  9. 9 Hazarath

    “<>”

  10. 10 Hazarath

    currently we are having only 2 side arrows for calender control
    i want to add two more arrows

    for month and year

    there is only two side arrows for a calender control
    if we want to from jan 2010 to jan 2020
    mean we have to click 120 times the right side arrow or switch to years mode this
    time waste for a user
    without using any dropdownlists how can we add two side arrows for year and month click change events for each side.

    plz help me

  11. Do you mind if I quote a few of your posts as long as I provide
    credit and sources back to your website? My blog is in the very same area of interest as yours and
    my users would really benefit from some of the information you provide here.

    Please let me know if this okay with you. Cheers!

  12. Hello mates, how is everything, and what you desire
    to say on the topic of this piece of writing, in my view its in fact awesome in favor of me.

  13. I read this piece of writing fully regarding the difference of most up-to-date and earlier technologies, it’s amazing article.


  1. 1 Patching the Ajax Control Toolkit Calendar Extender control to show a Month or Year « Tone’s Enterprise Dot Net Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s


%d bloggers like this: