1. Introduction:
Calendar控件是ASP.NET AJAX的一个用来和TextBox协作的一个控件。它提供了一个客户端的弹出窗口让客户选择一个时间,且时间显示格式是可以自定义的。通过选定一天然后点击它填写一个TextBox,或者是点击弹出窗口下边的当天时间来填写一个TextBox。
和其它日历控件一样可以先选择一个年,再选择一个月,或者是在一个月份上点击进入选择年份的菜单。如下图所示:
控件会根据浏览器的语言来选择时间格式的显示。如果是中文浏览器,显示的时间就是中文格式,也可以设置为英文格式。
需要适应多语言的一个条件是,在页面上的ScriptManager设置两个属性:EnableScriptGlobalization=”true”和EnableScriptLocalization=”true”。
2. Properties:
默认的Calendar所有的属性如下,其中斜体属性为可选项。
<ajaxToolkit:Calendar runat="server"
TargetControlID="Date1"
CssClass="ClassName"
Format="MMMM d, yyyy"
PopupButtonID="Image1" />
a. TargetControlID: 用来和Calendar交互的TextBox的ID。
b. CssClass: Calendar使用的Css样式。在下面的calendar Theming部分再详细说明。
c. Format: 时间的现实形式, 比如yyyy-MM-dd , MMMM-yyyyy-dd等等。可以直接在设计界面的format属性设置日期格式。
d. PopupButtonID: 当点击ID为这个ID的控件时弹出来calendar的对话框。
e. PopupPostion: 显示日历的方位,可以是TextBox的左下角,右下角,左上角,右上角。
f. SelectedDate: 指定日历的初始化日期。
为了这些基本的属性设置外, Calender还提供了一个Css样式的设置,因为默认的Css样式是可以被覆盖的,所有的Css 类如下图所示(英文显示的):
如果你英语不好,你没有必要去看每个class的意思,完全可以凭借每个Css类名字的最后那个英文单词看出来它是控制那一部分的。比如ajax_calendar_footer是用来控制日历控件的弹出框最下面那一部分的style的。后面会给出个使用自定义Css样式的例子。
3. Example:
这里会提供两个例子,一个是MS提供的,一个是使用自定义的Css样式来显示Calendar.
还有两个是我给大家提供的分别调用google API和从数据库查找匹配数据的方法。
我使用的是VS2005, 而且已经安装好了ajaxtoolkit,
第一步: 创建一个ajaxtoolkit模板:
起个项目名字叫做AjaxControlToolKit_Calendar。
第二步: 向default.aspx页面拖入TextBox,,并设置ID为Date1,再拖入页面一个CalendarExtender,属性设置如下:
MS提供的另外个是带有图片按钮的calendar弹出框实现:
和上面例子的差别就是这个需要设置PopupButtonID为这个imagebutton的ID.
然后给大家个例子是使用自定义的Css样式。
首先需要创建一个Calendar.Css文件,注意要和你使用这个Css文件的aspx文件在同一个目录下。
然后把下面的Css代码考入这个Css文件。
.cal_Theme1 .ajax__calendar_container
{
background-color: #e2e2e2; border:solid 1px #cccccc;
}
.cal_Theme1 .ajax__calendar_header
{
background-color: #ffffff; margin-bottom: 4px;
}
.cal_Theme1 .ajax__calendar_title,
.cal_Theme1 .ajax__calendar_next,
.cal_Theme1 .ajax__calendar_prev
{
color: #004080; padding-top: 3px;
}
.cal_Theme1 .ajax__calendar_body
{
background-color: #e9e9e9; border: solid 1px #cccccc;
}
.cal_Theme1 .ajax__calendar_dayname
{
text-align:center; font-weight:bold; margin-bottom: 4px; margin-top: 2px;
}
.cal_Theme1 .ajax__calendar_day
{
text-align:center;
}
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_day,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_month,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_year,
.cal_Theme1 .ajax__calendar_active
{
color: #004080; font-weight:bold; background-color: #ffffff;
}
.cal_Theme1 .ajax__calendar_today
{
font-weight:bold;
}
.cal_Theme1 .ajax__calendar_other,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_today,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_title
{
color: #bbbbbb;
}
再创建一个default2.aspx文件,然后在head节点加入
<link href="calendar.css" rel="stylesheet" type="text/css" />使用这个Css文件。
然后在aspx文件中写入下面的代码(注意CssClass的设置):
第四步是用到的Css样式代码：
<style>
/* Content Page Layout */
.demoarea {
padding:20px;
background:#FFF url(images/demotop.png) no-repeat left top;
}
.demoarea p
{