65.9K
CodeProject 正在变化。 阅读更多。
Home

日历 UI 扩展控件

Rohit Gadagkar
starIconstarIconstarIconstarIconemptyStarIcon

4.00/5 (3投票s)

2007年9月26日

5分钟阅读

viewsIcon

78601

downloadIcon

1244

一个 AJAX 日历扩展控件，实现了高度可定制的 UI 和所见即所得设计器预览

摘要

标准的 ASP.NET 日历控件虽然有用，但没有提供自定义标题日期显示的挂钩。此外，控件模型不够灵活，无法通过子类化进行扩展。我实现了一个 AJAX 控件扩展器（CalendarUIExtender），它公开了丰富的 API，可用于精细控制标题日期和日标题显示。与 AjaxControlToolkit 中的扩展器不同，此扩展器的目标控件是标准的 ASP.NET Calendar 控件，旨在增强日历控件的 UI 功能。它具有位标志枚举，能够打开或关闭特定日期组件，自定义日期组件的渲染顺序，自定义前缀和后缀，自动生成日期后缀（例如 1st、2nd、12th），自动格式化，日期显示行为（当前月份视图中的今天日期，始终显示今天日期，选定日期等），自定义日标题等等。

最终日期输出是通过使用 DateExpressionBuilder 工具类从位规格计算得出的。DateExpressionBuilder 是格式化引擎的核心，它使用我提出的一种算法以及一系列实用函数来计算一个自定义日期格式模式，该模式用作 DateTime.ToString 的参数。CalendarUIExtender 控件实现了一个 JavaScript prototype，它处理客户端-服务器属性同步，以及使用 DHTML 和 JavaScript 进行客户端渲染。扩展器生成的输出被传递给 JavaScript 原型，该原型解析 ASP.NET Calendar 生成的 HTML 输出，并替换输出的特定区域以渲染自定义日期标题和日标题规格。请参阅渲染部分了解详细信息。

扩展器控件具有丰富的 UI 设计器，可以通过特定区域的操作列表实现控件配置。它还具有智能标签功能，以便用户可以在 Visual Studio 设计视图中预览渲染的输出。

用法

下面的代码片段展示了自定义日标题和标题日期渲染的一种方法。但是，最好使用 CalendarUIExtender's 设计器丰富的运行时渲染功能来直观地生成这些设置。

<cc1:CalendarUIExtender ID="CalendarUIExtender1" 
    runat="server" EnableViewState="true"
    TargetControlID="calTest"
    TitleDateDisplayBehaviour="UserDefinedPrefixSuffixBehaviour"
    TitleDateDisplayOrder="DayOfWeek_Date_Month_Year"
    TitleDateValueBehaviour="TodayAlways"
    TitleDateDayOfWeekSuffix=", "
    TitleDateYearPrefix=", "
    DayHeaderFormat ="Custom"
    CustomDayHeaders="Sun,M,Tu,W,Th,F,Sat" >
</cc1:CalendarUIExtender>

标题日期和日标题渲染自定义

CalendarUIExtender 实现了一个支持智能标签、区域和区域特定操作列表的所见即所得设计器。以下是一组显示扩展器控件运行时的屏幕截图。

Visual Studio 设计器中的控件渲染

Visual Studio Designer Support

浏览器中的控件渲染

Example 1

自定义用户短语可以与自动生成的日期后缀结合使用
（例如 12th, 22nd）

Example 2

日历扩展器控件的结构

此控件及其实用程序的代码和逻辑复杂而广泛。我无意就此撰写一篇详细文章。如果您对内部组件的工作原理感到好奇，请查阅源代码。

CalendarUIExtender Classes

DateDisplaySpec 是一个位枚举（Flags enum），可以进行 XOR 运算以打开或关闭特定位，以及其他典型的位运算，如 OR。

Enum Operations

以下类实现了丰富的 Visual Studio 设计器预览功能（带有智能标签和区域特定操作列表的上下文菜单）。

CalendarUIExtender Designer Classes

行为模式

标题日期行为模式

public enum DateDisplayBehaviour
{
    ASPNetCalendarSetting,
    DefaultPrefixSuffixBehaviour,
    UserDefinedPrefixSuffixBehaviour
}

public enum DateValue
{
    ASPNetCalendarSetting,
    TodayAlways,
    TodayOnlyInCurrentMonth,
    SelectedDate,
    VisibleDate
}

public enum DateDisplayOrder
{
    DayOfWeek_Month_Date_Year,  // Sunday Jan 23 2007

    DayOfWeek_Date_Month_Year,  // Sunday 23rd Jan 2007

    Year_Month_Date_DayOfWeek   // 2007 Jan 23 Sunday

}

日标题行为模式：日标题名称的格式。当格式值为 Custom 时，TitleDayHeader 属性被设置为一个逗号分隔的标题名称列表。

public enum DayHeaderFormat
{
    ASPNetCalendarSetting,
    OneLetterDay,
    TwoLetterDay,
    ThreeLetterDay,
    FullName,
    Custom    // allows custom names for day headers

}

位标志允许对标题日期和日标题显示的各个属性进行精细控制。

[Flags]
public enum DateDisplaySpec : int
{
    None                            =   0,
    YearPrefix                      =   0x01,
    YearSuffix                      =   YearPrefix<<1,
    Year4Digits                     =   YearSuffix<<1,
    Year2Digits                     =   Year4Digits<<1,
    MonthPrefix                     =   Year2Digits<<1,
    MonthSuffix                     =   MonthPrefix<<1,
    MonthNumericAnyDigits           =   MonthSuffix<<1,
    MonthNumeric2Digits             =   MonthNumericAnyDigits<<1,
    MonthFullWord                   =   MonthNumeric2Digits<<1,
    Month3LetterAbbreviation        =   MonthFullWord<<1,
    DatePrefix                      =   Month3LetterAbbreviation<<1,
    DateSuffix                      =   DatePrefix<<1,
    DateSuffix2Letter               =   DateSuffix<<1,
    DateAnyDigits                   =   DateSuffix2Letter<<1,
    Date2Digit                      =   DateAnyDigits<<1,
    DayOfWeekPrefix                 =   Date2Digit<<1,
    DayOfWeekSuffix                 =   DayOfWeekPrefix<<1,
    DayOfWeekNumeric                =   DayOfWeekSuffix<<1,
    DayOfWeekFullWord               =   DayOfWeekNumeric<<1,
    DayOfWeek3LetterAbbreviation    =   DayOfWeekFullWord<<1
}

分层渲染

  1. ASP.NET 日历控件渲染表格标记。
  2. 扩展器的 JavaScript prototype 解析目标 ASP.NET 日历控件的 HTML 输出，并替换标题日期单元格和 7 个日标题单元格的内容。如果扩展器配置为模仿 ASP.NET 日历行为，则会跳过原型渲染。这允许标准日历输出按原样渲染。

与 AjaxControlToolkit CalendarExtender 的差异

标题 CalendarExtender 我的控件

用例

旨在成为一个弹出日历，带有事件驱动的触发器来显示或隐藏日历。

旨在成为网页上始终可见的日历。

功能

实现日期选择器功能。

不实现与 ASP.NET 日历控件不同的行为。它旨在作为 UI 增强器。但是，它为日历控件添加了一些特定于 UI 的附加行为。

目标

针对另一个控件（文本框、下拉列表等）。

（默认情况下）针对同一命名容器中的 ASP.NET 日历。

模型

ASP.NET 日历功能的 JavaScript 重写，包括模型（SelectedDate、VisibleDate、style 等）。原型实现了所有日历逻辑。

不旨在成为 JavaScript 日历（可以通过将 ASP.NET 日历包装在更新面板中来随时进行 AJAX 化）。

重用 ASP.NET 日历模型和实现，并在运行时透明地注入其模型和实现。

样式

日历样式在样式表类中设置。除非开发人员了解高级 HTML 样式概念，否则不简单。

重用 ASP.NET 日历样式属性。开发人员可以通过 ASP.NET 日历控件设计器轻松定义样式。

设计器预览

设计器不会在 Visual Studio 中渲染设计时预览。

扩展器有一个设计器，通过应用为 ASP.NET 日历控件定义的样式来渲染标题日期和日历日标题的预览。

设计器实现了区域和区域特定的智能标签。

当扩展器处于模式时，设计器使用反射渲染 ASP.NET 日历日标题。

标题日期格式

Format 属性是使用 DateTime 格式语法定义的。设计时没有可用的预览。对于普通开发人员来说并不简单。

为每个日期组件定义位标志枚举和属性。

提供开箱即用的粗粒度以及细粒度配置。

Visual Studio 中的设计器预览使其易于配置。

DateExpressionBuilder 类是计算最终结果的引擎，它将用户定义和自动化行为转换为 DateTime 格式规范。

对于普通开发人员来说，添加自定义短语并不简单。

可以在设计器中完成，而无需了解自定义短语的 DateTime 格式规范。

自动生成日期后缀（如果启用）。例如 21st、11th、22nd、3rd、13th

动态标题日期

标题日期根据 Format 属性是静态的。

允许动态标题日期行为。

  • ASPNetCalendarSetting
  • TodayAlways（始终显示今天）
  • TodayOnlyInCurrentMonth（当用户切换到不同的月份时，它以指定格式显示可见日期；否则显示今天日期）
  • SelectedDate（选定日期）
  • VisibleDate（可见日期）

日标题

不允许自定义日标题。

允许日标题行中的星期几标题使用单字母、双字母、三字母、全名以及自定义名称。

历史

  • 2007 年 9 月 26 日 -- 原始版本发布
© . All rights reserved.