In the previous tutorial we discussed about accessible properties of calendar control and found the different types of views of AJAX Calendar extender control. Here we will learn how to change the default view of calendar control from days view to month or year view by using the internal function of calendar behavior script to switch the modes of the Ajax calendar extender. As we learnt earlier there are 3 types of views days, months and years. There is a _switchMode : function(mode, dontAnimate) function inside the CalendarBehavior.js file associated with calendar control that is not accessible via property window. _switchMode is a private function of calendar behavior that accepts 2 parameters:
1. mode:
you can pass the mode parameter value as string type among any of these : "days", "months" or "years"
2. dontAnimate:
you can pass the dontAnimate parameter value as bool type to enable or disable calendar animation at the time of view shifting, loading or unloading
How to call _switchMode function
Last step of functionality to change the default view of AJAX calendar control is to call the _switchMode function at the time of loading while clicking the popup button associated with Calendar control. To call the function you need to specify the BehaviorID property of AJAX Calendar extender control so that it could access the required function to change the view of calendar while loading. Next thing you need to do is calling the client side javascript function while showing the calendar. So this can be done by passing the function name to the OnClientShowing property of calendar extender control. Following code shows the complete working snippet of AJAX Calendar control along with method to change the default view of calendar while loading:
<html>
<head id="Head1" runat="server">
<title>AJAX Control</title>
<script type="text/javascript">
function setCalendarMode()
{
var CalendarBehavior = $find("myCalendarBehavior");
CalendarBehavior._switchMode("years", true);
}
</script> </head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="txtDateTime" runat="server"></asp:TextBox>
<ajaxtoolkit:CalendarExtender BehaviorID="myCalendarBehavior" OnClientShowing="setCalendarMode" ID="CalendarExtender1" runat="server" PopupButtonID="btnShowCalendar" TargetControlID="txtDateTime" Format="MMM dd, yyyy" />
<asp:Button ID="btnShowCalendar" runat="server" Text="show"></asp:Button>
</div>
</form>
</body>
</html>
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.
From: http://programming.top54u.com/post/Change-the-Default-View-of-AJAX-Calendar-Control.aspx