5.10 日历控件(Calendar)

  在传统的Web开发中,日历是最复杂也是最难实现的功能,好在ASP.NET中提供了强大的日历控件来简化日历控件的开发。日历控件能够实现日历的翻页、日历的选取以及数据的绑定,开发人员能够在博客、OA等应用的开发中使用日历控件从而减少日历应用的开发。

5.10.1 日历控件的样式
  日历控件通常在博客、论坛等程序中使用,日历控件不仅仅只是显式了一个日历,用户还能够通过日历控件进行时间的选取。在ASP.NET中,日历控件还能够和数据库进行交互操作,实现复杂的数据绑定。开发人员能够将日历控件拖动在主窗口中,在主窗口的代码视图下会自动生成日历控件的HTML代码,示例代码如下所示。
+展开
-HTML
        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>

ASP.NET通过上述简单的代码就创建了一个强大的日历控件,其效果如图5-25所示。
日历控件
图5-25 日历控件

  日历控件通常用于显示月历,日历控件允许用户选择日期和移动到下一页或上一页。通过设置日历控件的属性,可以更改日历控件的外观。常用的日历控件的属性如下所示:
?1)DayHeaderStype:月历中显示一周中每一天的名称和部分的样式。
?2)DayStyle:所显示的月份中各天的样式。
?3)NextPrevStyle:标题栏左右两端的月导航所在部分的样式。
?4)OtherMonthDayStyle:上一个月和下一个月的样式。
?5)SelectedDayStyle:选定日期的样式。
?6)SelectorStyle:位于月历控件左侧,包含用于选择一周或整个月的连接的列样式。
?7)ShowDayHeader:显示或隐藏一周中的每一天的部分。
?8)ShowGridLines:显示或隐藏一个月中的每一天之间的网格线。
?9)ShowNextPrevMonth:显示或隐藏到下一个月或上一个月的导航控件。
?10)ShowTitle:显示或隐藏标题部分。
?11)TitleStyle:位于月历顶部,包含月份名称和月导航连接的标题栏样式。
?12)TodayDayStyle:当前日期的样式。
?13)WeekendDayStyle:周末日期的样式。
  Visual Studio还为开发人员提供了默认的日历样式从而能够选择自动套用格式进行样式控制,如图5-26所示。
使用系统样式
图5-26 使用系统样式

  除了上述样式可以设置以外,ASP.NET还为用户设计了若干样式,若开发人员觉得设置样式非常困难,则可以使用系统默认的样式进行日历控件的样式呈现。

5.10.2 日历控件的事件
  同所有的控件相同,日历控件也包含自身的事件,常用的日历控件的事件包括有:
?1)DayRender:当日期被显示时触发该事件。
?2)SelectionChanged:当用户选择日期时触发该事件。
?3)VisibleMonthChanged:当所显示的月份被更改时触发该事件。
  在创建日历控件中每个日期单元格时,则会触发DayRender事件。当用户选择月历中的日期时,则会触发SelectionChanged事件,同样,当双击日历控件时,会自动生成该事件的代码块。当对当前月份进行切换,则会激发VisibleMonthChanged事件。开发人员可以通过一个标签来接受当前事件,当选择月历中的某一天,则此标签显示当前日期,示例代码如下所示。
+展开
-C#
        protected void Calendar1_SelectionChanged(object sender, EventArgs e)
        {
            Label1.Text = 
            "现在的时间是:" + Calendar1.SelectedDate.Year.ToString() + "年" 
            + Calendar1.SelectedDate.Month.ToString()+"月" 
            + Calendar1.SelectedDate.Day.ToString()+"号" 
            + Calendar1.SelectedDate.Hour.ToString()+"点";
        }

  在上述代码中,当用户选择了月历中的某一天时,则标签中的文本会变为当前的日期文本,如“现在的时间是xx”之类。在进行逻辑编程的同时,也需要对日历控件的样式做稍许更改,日历控件的HTML代码如下所示。
+展开
-HTML
        <asp:Calendar ID="Calendar1" runat="server" BackColor="#FFFFCC" 
            BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest" 
            Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px" 
            onselectionchanged="Calendar1_SelectionChanged" ShowGridLines="True" 
            Width="220px">

                    <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
                    <SelectorStyle BackColor="#FFCC66" />
                    <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
                    <OtherMonthDayStyle ForeColor="#CC9966" />
                    <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
                    <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
                    <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" 
                     ForeColor="#FFFFCC" />

        </asp:Calendar>

 上述代码中的日历控件选择的是ASP.NET的默认样式,如图5-27所示。当确定了日历控件样式后,并编写了相应的SelectionChanged事件代码后,就可以通过日历控件获取当前时间,或者对当前时间进行编程,如图5-28所示。
日历控件
图5-27 日历控件
选择一个日期
图5-28 选择一个日期

加支付宝好友偷能量挖...


评论(0)网络
阅读(174)喜欢(0)Asp.Net/C#/WCF