DayPilot 4：带有 CSS 主题的事件日历/调度程序 (ASP.NET)

 

• 下载示例项目 (Visual Studio 2012, C#, SQL Server 数据库)
• 下载 DayPilot Lite 5.0 - 源代码和二进制文件 [daypilot.org] 

 

DayPilot Lite 4 (Apache 软件许可证 2.0) 带来新功能：完全的 CSS 样式和主题支持。

让我们使用一个简单的调度项目来探索它。

项目特点

• 使用事件日历视图进行每周议程调度
• 为多个资源（人员）调度事件
• 包含所有资源的摘要调度程序视图
• 使用模式对话框创建事件
• 使用模式对话框编辑事件

您可以在 Visual Studio 2012 解决方案中下载此项目。

HTML5/JavaScript 事件日历

新功能 (2015 年 5 月)：DayPilot Lite for JavaScript (开源) 现在可供 下载。它包括 用于 HTML5/JavaScript/jQuery 的事件日历，支持拖放功能。 包含 AngularJS 事件日历 插件。

SQL Server 数据库 

我们将创建一个具有以下模式的简单 SQL Server 数据库

CREATE TABLE [dbo].[Event]
(
  [EventId] INT NOT NULL PRIMARY KEY IDENTITY, 
  [EventName] NVARCHAR(100) NULL, 
  [EventStart] DATETIME NULL, 
  [EventEnd] DATETIME NULL, 
  [ResourceId] INT NOT NULL
);

CREATE TABLE [dbo].[Resource]
(
  [ResourceId] INT NOT NULL PRIMARY KEY IDENTITY, 
  [ResourceName] NVARCHAR(100) NULL
);

数据库中有两个表

• [Event] 表 存储事件（预订）
• [Resource] 表存储资源（人员）

LINQ to SQL

 

我们将使用 LINQ to SQL 访问数据库 (DayPilot.mdf)。

首先，我们将通过将表从服务器资源管理器拖动到新的 DayPilot.dbml 文件来创建所需的辅助类。

事件日历 (议程)

 

Default.aspx 文件将显示带有议程的 事件日历，用于选定人员。它使用 DayPilot Calendar ASP.NET 控件。

Default.aspx

<DayPilot:DayPilotCalendar 
  runat="server" 
  ID="DayPilotCalendar1"
  CssOnly="true"
  CssClassPrefix="calendar_white"
>
</DayPilot:DayPilotCalendar>

Default.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
    // ...
    InitCalendar();
  }
  LoadEvents();
}

private void InitCalendar()
{
  DayPilotCalendar1.TimeRangeSelectedHandling = DayPilot.Web.Ui.Enums.TimeRangeSelectedHandling.JavaScript;
  DayPilotCalendar1.TimeRangeSelectedJavaScript = "create('{0}')";
 
  DayPilotCalendar1.EventClickHandling = DayPilot.Web.Ui.Enums.EventClickHandlingEnum.JavaScript;
  DayPilotCalendar1.EventClickJavaScript = "edit('{0}')";
 
  DayPilotCalendar1.StartDate = DayPilot.Utils.Week.FirstDayOfWeek();
  DayPilotCalendar1.Days = 7;
}
 
private void LoadEvents()
{
  int resource = Convert.ToInt32(DropDownListResources.SelectedValue);
 
  DayPilotCalendar1.DataSource = from e in db.Events where e.ResourceId == resource select e;
  DayPilotCalendar1.DataTextField = "EventName";
  DayPilotCalendar1.DataValueField = "EventId";
  DayPilotCalendar1.DataStartField = "EventStart";
  DayPilotCalendar1.DataEndField = "EventEnd";
  DayPilotCalendar1.DataBind();
}

调度器

 

Overview.aspx 页面将显示调度程序视图，一次显示所有人员。它使用 DayPilot Scheduler ASP.NET 控件。

Overview.aspx

<DayPilot:DayPilotScheduler
  runat="server" 
  ID="DayPilotScheduler1"
  CssOnly="true"
  CssClassPrefix="scheduler_white"
>
</DayPilot:DayPilotScheduler>

Overview.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
    LoadResources();
    InitCalendar();
  }
  LoadEvents();
}
 
private void InitCalendar()
{
  DayPilotScheduler1.TimeRangeSelectedHandling = DayPilot.Web.Ui.Enums.TimeRangeSelectedHandling.JavaScript;
  DayPilotScheduler1.TimeRangeSelectedJavaScript = "create('{0}', '{1}')";
 
  DayPilotScheduler1.EventClickHandling = DayPilot.Web.Ui.Enums.EventClickHandlingEnum.JavaScript;
  DayPilotScheduler1.EventClickJavaScript = "edit('{0}')";
 
  DayPilotScheduler1.CellWidth = 40;
  DayPilotScheduler1.EventHeight = 25;
}
 
private void LoadEvents()
{
  DayPilotScheduler1.DataSource = from e in db.Events select e;
  DayPilotScheduler1.DataTextField = "EventName";
  DayPilotScheduler1.DataValueField = "EventId";
  DayPilotScheduler1.DataStartField = "EventStart";
  DayPilotScheduler1.DataEndField = "EventEnd";
  DayPilotScheduler1.DataResourceField = "ResourceId";
  DayPilotScheduler1.DataBind();
}
 
private void LoadResources()
{
  var res = from r in db.Resources select r;
  foreach (Resource r in res)
  {
    DayPilotScheduler1.Resources.Add(r.ResourceName, r.ResourceId.ToString());
  }
}

事件日历 CSS 主题

此项目包含三个事件日历 CSS 主题。您可以在线 DayPilot 主题设计器中创建自己的主题。

白色 CSS 主题

绿色 CSS 主题

透明 CSS 主题

调度程序 CSS 主题

此项目包含三个调度程序 CSS 主题。您可以在线 DayPilot 主题设计器中创建自己的主题。 

白色 CSS 主题

绿色 CSS 主题

透明 CSS 主题

历史

• 2015 年 5 月 5 日：DayPilot Lite for ASP.NET WebForms 5.0 发布
• 2014 年 2 月 20 日：DayPilot Lite for ASP.NET WebForms 4.1 发布：引入内置默认 CSS 主题 

另请参阅  

 

• DayPilot 首页 
• 80 行代码的 ASP.NET MVC 的 AJAX 事件日历 (调度程序) [codeproject.com] 
• ASP.NET 的开源甘特图 (C#, VB.NET) [code.daypilot.org]
• ASP.NET 的项目管理 (开源) [code.daypilot.org]