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

DayPilot - 为 ASP.NET 构建类似 Outlook 的日历组件

Dan Letecky
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.86/5 (112投票s)

2005年12月16日

Apache

5分钟阅读

viewsIcon

491485

downloadIcon

9008

一个外观精美的 ASP.NET 控件，可以直观地显示日历中的事件。包含设计时支持和数据绑定。

ASP.NET MVC 版本

另请参阅后续文章

这些文章介绍了一个新的 DayPilot 版本，适用于 **ASP.NET MVC**，支持 **拖放 AJAX** 操作（事件移动、重调大小和创建）。

HTML5/JavaScript 版本

DayPilot Lite 也可用于 HTML5/JavaScript

最新版本包含 AngularJS 事件日历 [code.daypilot.org] 插件。

为 ASP.NET 构建类似 Outlook 的日历组件

故事很简单，你可能已经听过了：我需要一个组件，因为找不到一个好的，所以我决定自己写。我的想法是：找一个需要两小时，理解一个需要两小时，定制一个需要两小时。一共六小时。六小时我应该能自己写一个简单的组件。

特点

  • 用于在日/周/工作周视图中显示事件的可重用 ASP.NET 组件。
  • HTML5 支持
  • 完全基于 CSS 的样式。
  • 支持所有现代浏览器（Chrome、Firefox、Internet Explorer、Edge、Safari、Opera）。
  • Visual Studio 2010/2012/2013/2015
  • Azure 支持
  • 国际化支持（自动日期和时间格式化，12/24 小时制支持）。
  • 接受多种形式的数据，包括 DataTable、List 以及其他自定义对象集合。
  • 支持数据库后端（Microsoft SQL Server、MySQL 等）
  • 数据对象字段的简单映射（DataStartField、DataEndField、DataIdField、DataTextField）。
  • 用户定义的 JavaScript/服务器端操作，用于单击事件。
  • 用户定义的 JavaScript/服务器端操作，用于单击空闲时间。
  • 支持工作时间 - 除非有事件，否则不显示工作时间以外的时间。
  • 支持在当前日期之前开始或之后结束的事件。
  • 支持重叠事件（特定时刻有两个或多个事件）。
  • 商业友好型开源许可证（Apache 软件许可证 2.0）

安排并发事件的算法

以下机制用于安排事件

  • "Event" 类将保存事件的基本信息，如开始和结束时间、标题等。
  • "Day" 类将保存某一天内的所有事件。它可以从 DataTable 加载事件。每一天可以包含零个或多个 Block。
  • "Block" 类将包含相互重叠的事件。每个 Block 包含一个或多个 Column。
  • "Column" 类将包含一个 Block 内可以位于同一 Column 中的所有事件。

让我们通过视觉演示

该算法可以分为以下几个步骤

  1. 缩短所有 Event，使其不与其他日期重叠（例如，如果某个事件从昨天开始，则使其从今天的 00:00 开始）。
  2. 将 Event 的持续时间扩展到 30 分钟块（我们可能会在显示 5 分钟、5 秒的持续时间时遇到问题 - 无法在如此小的矩形高度中编写任何文本）。
  3. 查找 Block
    • 按开始时间（主要）和结束时间反向（次要）对所有事件进行排序 - 较长的事件更靠左。
    • 遍历事件 - 如果它与前一个事件重叠，则将其添加到当前 Block；否则创建一个新的 Block。
  4. 将 Event 安排到 Block 内的 Column 中（对每个 Block 进行此操作）
    • 找到重叠最多的时刻并计算重叠次数。创建这么多个 Column。
    • 将 Event 安排到 Column 中 - 从左侧找到第一个可用的 Column 并将其放置在那里。

现在，我们可以计算每个 Event 的位置，因为我们知道了 Block 和 Column

  • Left：(列号) / (所属块的总列数) 百分比。
  • Width：1 / (总列数) 百分比
  • Top：(开始时间) * (小时高度)
  • Height：(持续时间) * (小时高度)

快速入门示例

ASP.NET 控件声明 (.aspx)

<DayPilot:DayPilotCalendar ID="DayPilotCalendar1" runat="server" 
        DataTextField="name" 
        DataIdField="id" 
        TimeFormat="Clock12Hours" 
        DataStartField="Start" 
        DataEndField="End" 
        Days="7" 
        NonBusinessHours="Hide" 
        onbeforeeventrender="DayPilotCalendar1_BeforeEventRender"
        EventClickHandling="JavaScript"
        TimeRangeSelectedHandling="JavaScript"
        
        CssOnly="true"
        CssClassPrefix="calendar_transparent"
        >
        </DayPilot:DayPilotCalendar>

加载数据 (.aspx.cs)

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
      DayPilotCalendar1.StartDate = firstDayOfWeek(DateTime.Now, DayOfWeek.Sunday);
      DayPilotCalendar1.DataSource = getData();
      DataBind();
  }
}

更多关于 事件加载 [doc.daypilot.org] 的信息。

另请参阅 DayPilot 教程，了解分步设置指南。

调度器（3.0）

DayPilot Lite 3.0 支持调度器 ASP.NET 控件，该控件允许您并排显示多个资源的调度器。

另请参阅

甘特图（3.2）

DayPilot Lite 3.2 支持甘特图 ASP.NET 控件（每行显示一个任务）。

另请参阅

CSS 主题样式（4.0）

DayPilot Lite 4.0 支持完整的日历和调度器 CSS 样式。

您可以在在线主题设计器中设计自己的 CSS 主题

内置 CSS 主题（4.1）

DayPilot Lite 4.1 包含内置 CSS 主题。CssOnly 模式（完整的日历 CSS 样式模式）现在默认启用。日历默认 CSS 主题可以在没有任何外部依赖的情况下显示。

拖放（5.0）

ASP.NET WebForms 5.0 版 DayPilot Lite [daypilot.org] 现在支持日历拖放

  • 事件移动
  • 事件重调大小
  • 时间范围选择

源代码和二进制文件可供 下载 [daypilot.org]。

NuGet包

DayPilot Lite 也可用作 NuGet 包

历史

© . All rights reserved.