DayPilot为 ASP.NET 生成类似日历组件的Outlook

分享于 

9分钟阅读

Web开发

  繁體

ASP.NET MVC版本

请参见后续文章:

这些文章为收费 DayPilot 提供了一个新的版本,它支持拖拉 & drop操作( 事件移动,调整大小和创建)。

html5/javascript版本

DayPilot Lite也可以用于 html5/javascript:

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

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

这个故事很简单,你可能已经听说过了: 因为我找不到一个好的我决定写它,所以我需要一个组件。 我是这样想的: 我需要两小时才能找到它,另外两个小时才能理解它,另外两个小时来定制它。 六小时。六小时内,我应该自己编写一个简单的组件。

功能

  • 可以重用 ASP.NET 组件,用于显示 day/week/work 周视图中的事件。
  • HTML5支持
  • 基于css的样式。
  • 支持所有现代浏览器(。Chrome,Firefox,IE,Edge,Safari,Opera )。
  • Visual Studio 2010/2012/2013/2015
  • Azure支持
  • 国际化支持( 自动日期和时间格式,12/24 时钟支持)。
  • 以多种形式接受数据,包括 DataTable。列表和自定义对象的其他集合。
  • 支持数据库后端( 微软 SQL Server,MySQL,等等 )
  • 数据对象字段的简单映射(。DataStartField,DataEndField,DataIdField,DataTextField )。
  • 用户定义的javascript/服务器端操作单击事件。
  • 用户定义的javascript/服务器端操作单击空闲时间。
  • 营业时间支持- 不显示工作时间以外的时间,除非有一个事件。
  • 对当前日之后或者结束后启动的事件的支持。
  • 支持重叠事件( 特定时刻的两个或者更多事件)。
  • 商业友好开放源代码许可证( Apache软件许可证 2.0 )

并发事件安排算法

下面的机制用于安排事件:

  • Event"将保留有关事件的基本信息,如开始和结束时间。标题等。
  • " Day"将保留特定日期的所有事件。 它将能够从 DataTable 加载事件。 每天可以包含零个或者更多的Block
  • Block"类将包含彼此重叠的事件。 每个 Block 包含一个或者多个 Column
  • " Column"类将包含一个可以在单个 Column 中使用的Block的所有事件 inside。

让我们直观地展示一下:

可以按以下步骤描述该算法:

  • 缩短所有 Event的长度,使它们不会与另一天重叠( 比如。 从昨天开始,让我们从今天开始,在 00: 00开始。
  • 扩展 Event的'持续时间到 30分钟( 我们会有问题显示 5分钟,5秒- 它不可能写入任何文本到这样的小高度的rectangle )。
  • 查找 Block:
  • 按起始时间( 主) 顺序排序所有事件,并在逆向( 次要) - 更长的事件中更长的事件进行。
  • 循环遍历事件- 如果它与前一个添加到当前 Block,则创建新的Block
  • Event s 安排为 Column inside Block ( 对每个 Block 执行这里操作):
  • 找出最重叠和重叠的时刻。 创建许多 Column的数量。
  • Event s 安排到 Column s 中- 找到从左边的第一个免费 Column 并将它的放在。

现在,我们可以计算每个 Event的位置,因为我们知道 BlockColumn:

  • : ( 列编号)/( 所有者块的列总数) 百分比。
  • 宽度: 1/( 列的总数) 百分比
  • : ( 开始时间) * ( 小时高度)
  • 高度: ( 工期) * ( 小时高度)

快速启动示例

ASP.NET 控件声明(。aspx )

<DayPilot:DayPilotCalendarID="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 )

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

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

请参见 DayPilot教程,以获得step-by-step安装指南。

计划程序( 3 0 )

DayPilot for 3.0支持调度器 ASP.NET 控件,允许你显示多个资源side-by-side的调度程序。

另请参见:

甘特图( 3 2 )

DayPilot Lite 3.2支持甘特图 ASP.NET 控件( 每行显示一项任务)。

另请参见:

  • ASP.NET [code.daypilot.org] 甘特图

CSS主题样式( 4 0 )

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

你可以在联机主题设计器中设计自己的CSS主题:

内置的CSS主题( 4 1 )

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

拖放( 5 0 )

用于 ASP.NET web forms-5.0 [daypilot.org]的 DayPilot Lite现在支持日历拖放:

  • 活动活动
  • 事件调整大小
  • 时间范围选择

可以供下载的源代码和二进制文件( )。

NuGet封装

DayPilot Lite也可以作为一个NuGet软件包使用:

历史记录


COM  构建  asp-net  CAL  OUT  Building  
相关文章