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

使用 DayPilot（适用于 ASP.NET 的类似 Outlook 的日历/日程安排控件）

Dan Letecky
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.83/5 (57投票s)

2006年5月15日

Apache

7分钟阅读

viewsIcon

376158

downloadIcon

4245

展示灵活的 ASP.NET 事件日历/日程安排控件的功能。

事件日历日视图

AJAX Event Calendar Day View

事件日历周视图

HTML5 Event Calendar Week View

ASP.NET 计划器

DayPilot 包含一个计划器控件，允许您显示多个资源的事件。

ASP.NET 甘特图

DayPilot 包含一个甘特图控件，它在水平时间轴上每行显示一个任务。

事件日历功能 

DayPilot 是一个类似 Outlook 的开源事件日历/日程安排控件

入门  

DayPilot 正常工作所需的唯一步骤是将其绑定到数据源。它支持 DataTable（和 DataSet）作为数据源，因此您可以轻松地从数据库中加载事件。

我们有一张下表

ID  名称  Start  End
1  午餐 2014-06-01 12:00:00  2014-06-01 12:30:00
2  晚餐 2014-06-01 19:00:00  2014-06-01 21:00:00 
3  Sleep 2014-06-01 22:00:00  2014-06-02 07:00:00
4 早餐  2014-06-02 07:30:00 2014-06-02 08:30:00

为了在 DayPilot 日历中显示事件，您需要执行以下步骤

  1. 将 DayPilot 控件放置在 WebForm 上.
  2. 设置 DataSource 属性。
  3. 设置列名属性。
  4. 选择将要显示的天数。
  5. 调用 DataBind()。 

设置 DataSource 属性

从数据库（或其他来源）加载 DataTable 后，应将其分配给 DayPilotCalendar.DataSource 属性

DayPilotCalendar1.DataSource = MyDataTable;

在我们的示例中，我们是手动构建 DataTable

DataTable dt;
dt= new DataTable();
dt.Columns.Add("start", typeof(DateTime));
dt.Columns.Add("end", typeof(DateTime));
dt.Columns.Add("name", typeof(string));
dt.Columns.Add("id", typeof(string));
    
DataRow dr;

dr = dt.NewRow();
dr["id"] = 0;
dr["start"] = Convert.ToDateTime("15:30").AddDays(1);
dr["end"] = Convert.ToDateTime("16:30").AddDays(1);
dr["name"] = "Partner conf. call";
dt.Rows.Add(dr);

// ...

return dt;

从数据库加载事件时，我建议限制 SELECT，以便只加载必要的事件（而不是表中的所有事件）。DayPilot 在两种情况下都能正常工作（它只选择相关事件），但所有事件都必须加载并存储在 ViewState 中。

设置列名属性

您需要指出哪些列包含必要的数据

DayPilotCalendar1.DataStartField = "Start";
DayPilotCalendar1.DataEndField = "End";
DayPilotCalendar1.DataTextField = "Name";
DayPilotCalendar1.DataValueField = "ID";

设置可见日期

假设我们只想显示一天

DayPilotCalendar1.StartDate = Convert.ToDateTime("1 June 2012"); 
DayPilotCalendar1.Days = 1; // default (not necessary)

但我们也可以显示多天。这是 DayPilot 2.0 的新功能。

DayPilotCalendar1.StartDate = Convert.ToDateTime("1 June 2012"); 
DayPilotCalendar1.Days = 5;

示例

HTML5 Event Calendar Work Week View

数据绑定 

在 Page_Load() 方法中绑定数据

if (!IsPostBack)
    DataBind();

数据相关日历属性概述

以下是 DayPilotCalendar 的数据相关属性

DataSource
事件数据源（DataSource 或 DataTable）。

DataStartField
包含事件开始日期和时间的数据源列的名称（字符串）。 

DataEndField  
包含事件结束日期和时间的数据源列的名称（字符串）。  

DataTextField
包含事件名称的数据源列的名称（字符串）。

DataValueField
点击事件时，ID 将传递给事件处理代码（字符串）。 

StartDate
日历应显示的第一天（DateTime，默认值为 DateTime.Today）。 

天数
应渲染的天数（int，默认值为 1）。  

与 System.Web.UI.WebControls.Calendar集成

为了切换日期，您可以使用标准 .NET Framework 控件 System.Web.UI.WebControls.Calendar。您可以使用 PostBack 事件更改 DayPilot 的 StartDate 和 EndDate。

在我们的示例中，我们将使用 DayRender 事件来改进日历： 

  • 日期将成为特定日期的链接（即没有 PostBack）
  • 包含事件的日期将是粗体
private void Calendar1_DayRender(object sender, System.Web.UI.WebControls.DayRenderEventArgs e)
{
    string fontWeight = "normal";
    if (isThereEvent(e.Day.Date))
        fontWeight = "bold";

    string color = "black";
    if (e.Day.IsOtherMonth)
        color = this.Calendar1.OtherMonthDayStyle.ForeColor.Name;

    e.Cell.Text = String.Format("<a href='Default.aspx?day={0:d}' style='color: " 
        + color + ";text-decoration:none; font-weight:" 
        + fontWeight + "'>{1}</a>", e.Day.Date, e.Day.Date.Day);        
}

isThereEvent() 方法返回如果特定日期包含任何事件，则返回 true。此方法将特定于您的应用程序。您可以遍历从数据库返回（并提供给 DayPilotCalendar.DataSource）的数据，以避免另一次数据库请求。在我们的示例中，我们没有使用数据库，因此它是硬编码的

private bool isThereEvent(DateTime date)
{
    DateTime today = DateTime.Now;
    DateTime tomorrow = today.AddDays(1);
    DateTime anotherDay = today.AddDays(3);

    // there are events today
    if ((date.DayOfYear == today.DayOfYear) && (date.Year == today.Year))
        return true;

    // there are events tomorrow
    if ((date.DayOfYear == tomorrow.DayOfYear) && (date.Year == tomorrow.Year))
        return true;

    // there are events on another day
    if ((date.DayOfYear == anotherDay.DayOfYear) && (date.Year == anotherDay.Year))
        return true;

    return false;
} 

 

使用 UpdatePanel 集成

自 2.3 版起，DayPilot 可在 UpdatePanel（ASP.NET AJAX 扩展/.NET Framework 3.5）中使用。如果将 Calendar (System.Web.UI.WebControls.Calendar) 和 DayPilotCalendar 都放在同一个 UpdatePanel 中，则可以使用 Calendar.SelectionChanged 事件处理程序切换日期。它可以像常规 PostBack 事件一样使用

    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        DayPilotCalendar1.StartDate = Calendar1.SelectedDate;
        DayPilotCalendar1.DataBind();
    }

事件日历外观

有许多选项可以更改默认外观： 

CellHeight
单元格高度（像素，int，默认值为 20）。最小高度为 15。 

HourWidth
小时名称宽度（像素，int，默认值为 40）。 

BusinessBeginsHour
工作时间开始的小时（int，默认值为 9）。 

BusinessEndsHour
工作时间结束的小时（int，默认值为 18）。 

HeightSpec
确定可见小时范围（HeightSpecEnum，默认值为 BusinessHoursNoScroll）。 

ShowHours
确定小时名称列是否可见（bool，默认值为 true）。 

TimeFormat
时间格式 - 12 小时制（下午 3 点）或 24 小时制（15:00）。 

宽度
控件宽度（字符串，默认值为“100%”）。 

日历 CSS 主题示例 

您可以使用在线主题设计器 [themes.daypilot.org] 创建自己的CSS 主题。 

绿色 CSS 主题 

白色 CSS 主题 

透明 CSS 主题 

处理用户操作

有两种类型的用户操作： 

  • 点击空闲时间（您通常会使用此操作创建新事件）
  • 点击事件（您通常会使用此操作显示事件详细信息）

这些操作可以在客户端（通过自定义 JavaScript 代码）或服务器端（通过处理服务器事件）进行处理。 

EventClickHandling 
处理鼠标点击日历事件（Disabled、JavaScript 或 PostBack）。  

TimeRangeSelectedHandling 
处理鼠标点击空闲时间段（Disabled、JavaScript 或 PostBack）。  

EventClickJavaScript 
当用户点击日历事件时应执行的 JavaScript 代码（前提是 EventClickHandling 设置为 JavaScript）。字符串“{0}”将替换为事件 ID。 

TimeRangeSelectedJavaScript 
当用户点击空闲时间段时应执行的 JavaScript 代码（前提是 FreetimeClickHandling 设置为 JavaScript）。字符串“{0}”将替换为 DateTime.ToString("s") 生成的标准格式的日期和时间 - 例如“2014-05-15T07:00:00”。 

服务器端事件处理 

EventClick
当用户点击事件且 EventClickHandling 属性设置为 PostBack 时发生。  

TimeRangeSelected
当用户点击事件且 TimeRangeSelectedHandling 属性设置为 PostBack 时发生。  

您的服务器端事件处理方法将获取重要数据

EventClick 示例 

可以使用 e.Value 读取事件的 ID。 

private void DayPilotCalendar1_EventClick(object sender, EventClickEventArgs e)
{
    Label1.Text = "Selected event: " + e.Value;
} 

FreeTimeClick 示例 

可以使用 e.Start 读取点击时间单元格的开始时间。 

private void DayPilotCalendar1_TimeRangeSelected(object sender, TimeRangeSelectedEventArgs e)
{
    Label1.Text = "Selected time: " + e.Start;
} 

资源

适用于 JavaScript 的 DayPilot

DayPilot 有一个特殊的仅客户端版本，可以与任何类型的后端（PHP、Ruby、Node.js）一起使用

适用于 ASP.NET MVC 的 DayPilot

DayPilot 有一个特殊版本，包括 ASP.NET MVC 绑定（服务器端）

历史

使用 DayPilot（适用于 ASP.NET 的类似 Outlook 的日历/日程安排控件）- CodeProject - 代码之家
© . All rights reserved.