ASP.NET - Calendar Web 服务器控件概述（中）

 

六、如何：自定义 Calendar Web 服务器控件的外观

      因为 Calendar 控件是一个由许多个别元素组成的复杂控件，它为您自定义其外观提供了多个选项。

      1、更改 Calendar 控件的常规外观

Calendar 控件建立页上的日历的默认外观，但是您可以更改日历的总的外观。如果为日历上的个别元素（如当前日期、选定日期等）设置外观属性，则这些个别设置基于您从总体上为日历所做的默认设置。您还可以从预定义的格式中选择。

说明： 默认情况下，在 Calendar 控件上没有指示当前日期的特殊格式。

按下表所列设置属性。

指定属性	将属性设置为
字体、文本和背景色	Font, ForeColor, BackColor.
控件的整体尺寸	Height, Width
个别日周围的边距和间隔	CellPadding, CellSpacing
边框和网格线的颜色、尺寸和样式（例如，点线）	BorderColor BorderStyle（设置为一个 BorderStyle 枚举值：Dotted、Dashed 或 Solid 等）。 ShowGridLines（true 或 false）

 

      2、更改每周日期显示

默认情况下，一周中所有日的名称在日历的顶部显示为一行。可控制该行的格式。

按下表所列设置属性。

要执行的操作	将属性设置为
启用或禁用部署每周日期的行	ShowDayHeader（true 或 false）
指定每周中日名称的格式（例如，全称或简称）	DayNameFormat（使用 DayNameFormat 枚举中的值：Full、Short、FirstLetter 或 FirstTwoLetters）。
指定一周的起始日（默认值是 Sunday）	FirstDayOfWeek（使用 FirstDayOfWeek 枚举中定义的日）。
设置颜色、字体、边框样式和宽度等	用于合并样式信息的 DayHeaderStyle。

 

      3、更改月份显示和定位链接

默认情况下，标题栏显示当前月份的名称和一组导航链接（LinkButton 控件），用户可以使用它们移动到下个月或上个月。

按下表所列设置属性。

要执行的操作	将属性设置为
完全移除标题栏（这将禁用月份定位）。	ShowTitle（true 或 false）
指定月份名称的格式（例如，全称或简称），还可添加年份。	TitleFormat（设置为 TitleFormat 枚举中的值：Month 或 MonthYear）。
指定月份定位链接的格式和文本	NextPrevFormat（使用 NextPrevFormat 枚举中的值：Month 或 CustomText）。 NextMonthText 和 PrevMonthText（设置为字符串）
设置颜色、字体、边框样式和宽度等	用于合并样式信息的 TitleStyle。有关详细信息，请参见使用样式设置 Web Calendar 控件元素的格式。 说明： 可以使用 NextPrevStyle 属性分别设置导航链接的格式。

说明： 在属性字符串中可以使用 HTML 标记。

 

七、如何：在 Calendar Web 服务器控件中自定义个别日

自定义个别日的外观和内容，这包括执行下面的操作：

·以编程方式突出显示某些日。例如，以不同的颜色显示假日。

·以编程方式指定是否可以选定个别日。

·向日显示中添加信息，例如约会或事件信息。

·自定义用户可以单击以选择某日的链接文本。

      当 Calendar 控件创建要发送到浏览器的输出时，它将引发 DayRender 事件。控件在准备要显示的日时将为每个日引发该事件，然后您可采用编程的方式检查正显示的是哪个日期，并对其进行适当的自定义。

DayRender 事件的方法带有两个参数，包括对引发事件的控件（Calendar 控件）的引用和一个 DayRenderEventArgs 类型的对象。DayRenderEventArgs 对象提供对另外两个对象的访问：

      ·Cell，它是一个 TableCell 对象，可用于设置个别日的外观。

·Day，可用于查询关于呈现日的信息，控制是否可选择该日，以及将内容添加到日中。Day 对象支持各种可用于了解有关日的信息的属性（例如，IsSelected、IsToday 等）。它还支持 Controls 集合，可操作该集合以将内容添加到日中。

 

A、自定义个别日的外观

1、创建用于处理 Calendar 控件的 DayRender 事件的方法。

2、在该方法中，设置 Cell 对象的属性，您可以使用 DayRenderEventArgs 参数访问此对象。

下面的示例演示如何更改个别日的外观。该方法使日历中的节假日呈现为黄色，而周末呈现为绿色。在该示例中，节假日是 2005 年 11 月 23 日至 11 月 30 日。

Protected Sub Calendar1_DayRender(ByVal sender As Object, _

        ByVal e As DayRenderEventArgs) Handles Calendar1.DayRender

    ' Display vacation dates in yellow boxes with purple borders.

    Dim vacationStyle As New Style()

    With vacationStyle

        .BackColor = System.Drawing.Color.Yellow

        .BorderColor = System.Drawing.Color.Purple

        .BorderWidth = New Unit(3)

    End With

 

    ' Display weekend dates in green boxes.

    Dim weekendStyle As New Style()

    weekendStyle.BackColor = System.Drawing.Color.Green

 

    ' Vacation is from Nov 23, 2005 to Nov 30, 2005.

    If ((e.Day.Date >= New Date(2005, 11, 23)) _

            And (e.Day.Date <= New Date(2005, 11, 30))) Then

        e.Cell.ApplyStyle(vacationStyle)

    ElseIf (e.Day.IsWeekend) Then

        e.Cell.ApplyStyle(weekendStyle)

    End If

End Sub

 

protected void Calendar1_DayRender(object sender,

    DayRenderEventArgs e)

{

    // Display vacation dates in yellow boxes with purple borders.

    Style vacationStyle = new Style();

    vacationStyle.BackColor = System.Drawing.Color.Yellow;

    vacationStyle.BorderColor = System.Drawing.Color.Purple;

    vacationStyle.BorderWidth = 3;

 

    // Display weekend dates in green boxes.

    Style weekendStyle = new Style();

    weekendStyle.BackColor = System.Drawing.Color.Green;

 

    if ((e.Day.Date >= new DateTime(2000,11,23)) &&

        (e.Day.Date <= new DateTime(2000,11,30)))

    {

        // Apply the vacation style to the vacation dates.

        e.Cell.ApplyStyle(vacationStyle);

    }

    else if (e.Day.IsWeekend)

    {

        // Apply the weekend style to the weekend dates.

        e.Cell.ApplyStyle(weekendStyle);

    }

 

B、指定可选定个别日

1、在用于 Calendar 控件的 DayRender 事件的方法中，通过从 Day 对象的 Date 属性中获取信息来确定哪一日被呈现。

2、将该日的 IsSelectable 属性设置为 true。

下面的示例演示如何将日期 2005 年 10 月 1 日设置为可选的，而所有其他日期都为不可选的。

protected void Calendar1_DayRender(object sender,

    DayRenderEventArgs e)

{

    DateTime myAppointment = new DateTime(2005, 10, 1);

    if (e.Day.Date == myAppointment)

    {

        e.Day.IsSelectable = true;

    }

    else

    {

        e.Day.IsSelectable = false;

    }

}

 

C、向个别日中添加内容

在用于 Calendar 控件的 DayRender 事件的处理程序中，将任何 HTML 或 ASP.NET Web 控件添加到来自于 DayRenderEventArgs 参数的 Day 对象的 Controls 集合中。

下面的示例显示假日。在页面加载过程中，将以二维数组创建假日列表。假日描述将被加载到与其日期对应的元素中。在 DayRender 事件的方法中，将每个日与假日数组进行比较。如果对应的假日数组元素中包含值，则使用假日文本创建一个 Label 控件，并将其添加到该日的 Controls 集合中。

string[,] holidays = new String[13, 32];

 

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)

{

    string aHoliday;

    DateTime theDate = e.Day.Date;

    aHoliday = holidays[theDate.Month, theDate.Day];

    if (aHoliday != null)

    {

        Label aLabel = new Label();

        aLabel.Text = " <br>" + aHoliday;

        e.Cell.Controls.Add(aLabel);

    }

 

}

 

protected void Page_Load(object sender, EventArgs e)

{

    holidays[1, 1] = "Birthday";

    holidays[2, 14] = "Anniversary";

}

 

D、自定义个别日的链接文本

1、在用于 Calendar 控件的 DayRender 事件的方法中，获取 DayRenderEventArgs 参数的 SelectUrl 属性。SelectUrl 属性将返回 JavaScript，通常为该日呈现此 JavaScript 以引起指示日期选择的回发。

2、使用串联创建用 SelectUrl 属性的值作为 href 属性的 HTML 超链接。

3、将超链接添加为 Cell 对象的 Text 属性。

下面的示例显示假日。在页面加载过程中，将以二维数组创建假日列表。假日描述将被加载到与其日期对应的元素中。在 DayRender 事件的方法中，将每个日与假日数组进行比较。如果对应的假日数组元素包含值，则代码将创建显示假日名而非日编号的链接文本。

string[,] holidays = new String[13, 32];

 

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)

{

    string aHoliday;

    DateTime theDate = e.Day.Date;

    aHoliday = holidays[theDate.Month, theDate.Day];

    if (aHoliday != null)

    {

        e.Cell.Text = "<a href=" + e.SelectUrl + ">" +

           aHoliday + "</a>";

    }

}

 

protected void Page_Load(object sender, EventArgs e)

{

    holidays[1, 1] = "Birthday";

    holidays[2, 14] = "Anniversary";

}

 

八、如何：使用样式设置 Calendar Web 服务器控件元素的格式

      与大部分 Web 服务器控件一样，Calendar 控件也允许使用样式来指定控件的外观，包括字体、颜色和边框等方面。有关对 Web 服务器控件使用样式的一般信息，请参见 ASP.NET Web 服务器控件和 CSS 样式。

      说明： 不是所有浏览器都完全支持样式。

      为灵活地自定义日历输出的外观，Calendar 控件支持对许多组成日历网格的分离元素应用样式。下面的关系图显示了一个日历，其中显示了所有的可选元素。

下表说明可使用样式控制的每个元素。

Calendar 控件元素	说明
DayStyle	当前月份的日。周末、今日和选定日可具有不同的样式（见下文）。
DayHeaderStyle	日历上方显示日名称的行。
NextPrevStyle	标题栏左端和右端放置月份定位 LinkButtons 控件的部分。
OtherMonthDayStyle	显示在当前月份视图中的上个月和下个月中的日。
SelectedDayStyle	用户选定的日。
SelectorStyle	位于左侧的列，包含用于选定某周或整月的链接。
TitleStyle	控件顶端包含月份名称和月份定位链接的标题栏。如果设置了 NextPrevStyle，它将重写标题栏的左端和右端。
TodayDayStyle	当前日期。
WeekendDayStyle	周末日期。

 

A、设置日历元素的样式

1、在页中键入样式元素作为 Calendar 控件的子级，如 <DayStyle> 或 <TitleStyle> 元素。

2、设置样式元素的属性 (property)（属性 (attribute)），例如 BackColor 或 BorderWidth。

下面演示了带有 DayStyle 元素的 Calendar 控件声明：

<asp:Calendar id="Calendar1" runat="server">

   <DayStyle BackColor="#FF8080"

      BorderWidth="2"

      BorderStyle="Groove">

   </DayStyle>

</asp:Calendar>

还可在运行时用代码设置样式元素。

 

B、以编程方式设置日历元素的样式

使用下面的语法设置个别样式元素的属性：

Calendar1.StyleName.Property = setting

下面的示例阐释一些针对 Calendar 控件的典型样式设置：

Calendar1.DayStyle.Font.Size = new FontUnit(10);

Calendar1.TitleStyle.ForeColor = System.Drawing.Color.Red;

 

九、如何：响应 Calendar Web 服务器控件中的日期选择

      如果 Calendar 控件的 SelectionMode 属性设置为除 None 外的任何值，则用户可选择一天或一个日期范围。您可检测并响应用户的选择。

 

A、响应日期选定

      使用下面的签名，为 Calendar 控件的 SelectionChanged 事件创建一个方法：

private void Calendar1_SelectionChanged (object sender, System.EventArgs e)

      说明： 只有当控件中的用户操作更改日期选择时，才引发该事件。例如，如果用户两次单击同一个日期，则第二次单击不引发事件。如果以编程方式设置日期范围，则同样不引发该事件。

      有关日期选定的信息可在下面这些属性中获得：

属性	说明
SelectedDate	单个日期。如果用户已选定单个日期，则该属性包含此日期。如果用户已选定多个日期，则该属性包含此日期范围中的第一个日期。
SelectedDates	包含所有选定日期的集合。该集合中的日期是有序和唯一的。因为 Calendar 控件不允许用户选择多个单独的日期，集合中的日期也是连续的。

 

B、确定选定的日期数

获取 SelectedDates 集合的 Count 属性值，如下面的示例所示。

private void Calendar1_SelectionChanged (object sender, System.EventArgs e)

{

   Text1.Text = String.Format("You selected {0} date(s).",

      Calendar1.SelectedDates.Count);

}  

      如果已确定用户选定了多个日期，则可获取日期范围。

 

C、获取多个日期选定的日期范围

1、使用 SelectedDates 属性的 Count 属性获取选定的日期的计数。

2、获取集合中的第一个日期，然后通过将计数的索引处的日期减一获取最后一个日期。下面的示例在页面上的文本框控件中显示第一个日期和最后一个日期。

private void Calendar1_SelectionChanged (object sender,

   System.EventArgs e)

{

   SelectedDatesCollection theDates = Calendar1.SelectedDates;

   if (theDates.Count > 1)

   {

      DateTime firstDate = theDates[0];

      DateTime lastDate = theDates[theDates.Count-1];

      TextBox1.Text = firstDate.ToString();

      TextBox2.Text = lastDate.ToString();

   }

}

 

D、获取多个日期选定的时间跨度

创建一个 TimeSpan 对象，并将其设置为 SelectedDates 集合中最后一个日期与第一个日期之间的差，然后获取 TimeSpan 对象的 Days 属性。

private void Calendar1_SelectionChanged (object sender,

   System.EventArgs e)

{

   SelectedDatesCollection theDates = Calendar1.SelectedDates;

   TimeSpan timeSpan = theDates[theDates.Count-1] - theDates[0];

   TextBox1.Text =

      String.Format("You have selected {0} day(s).", timeSpan.Days + 1);

}