CalendarExtender简要概述及样式设置

　　基于Ajax1.0 开发的开发包AjaxControlToolkit中的CalendarExtender控件，主要是用来实现日期的选取。普遍用法是用一个文本框，获取焦点时弹出日期面板，选择日期后将日期返回到文本框中。简要提一下关于这个控件的属性及样式（Calendar）设置：

• TargetControlID
  通过该属性设置当哪个控件获取焦点时，弹出日期面板并将日期值返回到这个控件中，通常设置为文本框。
• Format
  通过该属性，设置返回日期的格式。
• PopupButtonID
  通过该属性，设置当哪个控件点击时，弹出日期面板，此控件不授受返回值

样例：

 

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    <div>
        <br /><br />
        <b>Default Calendar:</b>
        <asp:TextBox ID="Data1" runat="server"></asp:TextBox>
           <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="Data1">
    </cc1:CalendarExtender> 
    <b>Calendar with custom style and Data Format:</b><br />
        <asp:TextBox ID="Data2" runat="server"></asp:TextBox>
        <cc1:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="Data2" CssClass="MyCalendar" Format="mm,d,yyyy">
        </cc1:CalendarExtender>
        <br />
        <br />
        <b>Calendar with associated button：</b>
        <asp:TextBox ID="Data3" runat="server"></asp:TextBox>
        <asp:Image ID="Image1" runat="server" ImageUrl="~/Calendar_scheduleHS.png" />
        <cc1:CalendarExtender ID="CalendarExtender3" runat="server" TargetControlID="Data3" PopupButtonID="Image1">
        </cc1:CalendarExtender>

关于CalendarExtende样式设置
　　通常，我们总是喜欢通过CSS样式表来设置控件，直接在VS里设置控件样式只会加重页面的负载，原因是样式直接写入了HTML标记输出到了页面，三个样式相同的控件，意味着要下载三套css样式，如果将样式应用在外部的css文件中，可以大大地提高页面性能。
　　下面的css文件片断，是上例中第二个CalendarExtender控件指向的MyCalender样式类。从中可以看到。CalendarExtender主体的样式设置，是在子类ajax__calendar_container类中进行，其它的样式设置，参照如下：

.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;
}