Change the Default View of AJAX Calendar Control
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
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
· ［.NET］调用本地 Deepseek 模型
· Blazor Hybrid适配到HarmonyOS系统
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· 解决跨域问题的这6种方案，真香！
· 一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库
· 分享4款.NET开源、免费、实用的商城系统
2009-04-29 SQL Server Hosting Toolkit
2009-04-29 .NET在后置代码中输入JS提示语句（背景不会变白）
2009-04-29 网页加速的14条优化法则 - 网站开发与优化
2009-04-29 让.Net 程序脱离.net framework框架运行
2008-04-29 C语言程序设计 求阶乘递归函数调用示例