Ajax基础15

轻松掌握Ajax.net系列教程十四：使用CalendarExtender

本章主要介绍CalendarExtender的使用方法。CalendarExtender组件比.net原来自带的Calendar控件效果更Cool，使用方法也丰富了很多。

第一步：建立AJAX Control Toolkit Website

为了演示CalendarExtender丰富的使用方法，本例子一共使用了两个TextBox控件、一个Image控件和两个CalendarExtender组件。我会通过两个TextBox演示CalendarExtender两种不同的使用方法。我们将以上控件都拖进设计界面，代码如下：

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server">

</ajaxToolkit:CalendarExtender>

<br />

<br />

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><asp:Image ID="Image1" ImageUrl="~/Calendar_scheduleHS.png"

runat="server" />

<ajaxToolkit:CalendarExtender ID="CalendarExtender2" runat="server">

</ajaxToolkit:CalendarExtender>

当然我们还需要准备一个简单的样式表，让Calendar显得更漂亮，具体代码如下所示： .MyCalendar .ajax__calendar_container {

border:1px solid #646464;

background-color: lemonchiffon;

color: red;

}

.MyCalendar .ajax__calendar_other .ajax__calendar_day,

.MyCalendar .ajax__calendar_other .ajax__calendar_year {

color: black;

}

.MyCalendar .ajax__calendar_hover .ajax__calendar_day,

.MyCalendar .ajax__calendar_hover .ajax__calendar_month,

.MyCalendar .ajax__calendar_hover .ajax__calendar_year {

color: black;

}

.MyCalendar .ajax__calendar_active .ajax__calendar_day,

.MyCalendar .ajax__calendar_active .ajax__calendar_month,

.MyCalendar .ajax__calendar_active .ajax__calendar_year {

color: black;

font-weight:bold;

}

注意：以上样式套用了页面输出客户端后系统为Calendar自动生成的ID，大家不需要理解这部分代码，只需要按照相应的位置设置好风格就可以了。

第二步：设置CalendarExtender

由于我演示了CalendarExtender的两种用法，因此设置有两种，但差别不大，具体代码如下所示：