微软的Ajax Control Toolkit为我们提供了丰富的控件,可以满足我们开发人员大部分的日常需求。更重要的是他是开源的,为我们学习和修改提供了方便。
最近在使用他的Calendar控件,只要少量的代码就可以添加日历功能,开发起来相当简洁,有兴趣的朋友可以看看官方的demo。
但是他有个缺陷,只能选取日期,不能选取月份,为了满足自己的需求,则只能修改源代码了。
首先要去codeplex下载最新的版本40412,当然别忘了再下载一个Ajax Minifier
打开解决方案我们会看到他包含了很多项目

其实不需要太过担心,我们只需要修改其中的两个就行了,一个就是MicrosoftAjax.Extended.VS2008,他包含了所有的客户端脚本,另一个就是AjaxControlToolkit.VS2008,他包含了服务端代码。
下面开始正式的编码工作
一 改写服务端代码,添加EnableMonthSelect属性
打开AjaxControlToolkit.VS2008项目下Calendar文件夹中的CalendarExtender.cs文件,给类CalendarExtender添加属性,这里我就直接添加到了该类的第一行:
[DefaultValue(false)]
[ExtenderControlProperty]
[ClientPropertyName("enableMonthSelect")]
public virtual bool EnableMonthSelect
{
get { return GetPropertyValue("EnableMonthSelect", false); }
set { SetPropertyValue("EnableMonthSelect", value); }
}
这是一个bool类型的值,默认为false,对应的客户端属性为enableMonthSelect。
二 改写客户端脚本,添加enableMonthSelect
上一步添加了服务端的属性EnableMonthSelect,他对应的客户端属性为enableMonthSelect,因此我们还要给客户端添加该属性。
打开MicrosoftAjax.Extended.VS2008项目下Calendar文件夹中的CalendarBehavior.pre.js文件,我们会看到他其实就是声明了一个javascript类:Sys.Extended.UI.CalendarBehavior,只要将enableMonthSelect属性添加到该类就行了。
我将他添加到了this._format = "d"的上面一行: this._enableMonthSelect = false;注意前面是有下划线的。c#的属性里面都有get,set方法,其实客户端的脚本里面也有,我们只要分别要get_,set_作为函数的前缀就行。这里我将它们添加到了Sys.Extended.UI.CalendarBehavior.prototype = {的下面一行:
get_enableMonthSelect: function() {
return this._enableMonthSelect;
},
set_enableMonthSelect: function(value) {
if (this._enableMonthSelect != value) {
this._enableMonthSelect = value;
this.raisePropertyChanged("_raisePropertyChanged");
}
},
三 修改默认行为
在客户端脚本里面找到_cell_onclick函数,可以看到当点击month的时候,他的操作是_switchMode,我们只要修改这里,当enableMonthSelect为true的时候,让他执行和点击日期同样的操作就行了:
case "month":
if (this._enableMonthSelect) {
this.set_selectedDate(target.date);
this._switchMonth(target.date);
this._blur.post(true);
this.raiseDateSelectionChanged();
}
else {
if (target.month == visibleDate.getMonth()) {
this._switchMode("days");
} else {
this._visibleDate = target.date;
this._switchMode("days");
}
}
break;
这样就已经写完了,使用的时候只要将按以下设置就可以
<ajaxToolkit:CalendarExtender ID="c1" runat="server" TargetControlID="d1"
PopupButtonID="i1" Format="yyyyMM" DefaultView="Months" EnableMonthSelect="true" />
