AJAX 事件日历 (日程表) for ASP.NET MVC，代码量仅 80 行

Dan Letecky

4.89/5 (108投票s)

2012 年 6 月 15 日

Apache

5分钟阅读

533855

16973

如何使用开源的 DayPilot Lite for ASP.NET MVC 库 (Apache License 2.0) 来构建一个 AJAX 事件日历 (日程表)。

下载 ASP.NET MVC 3 示例项目 (250 KB; Visual Studio 2010, SQL Server Express)
下载 ASP.NET MVC 4 示例项目 (250 KB; Visual Studio 2010, SQL Server Express)
下载 ASP.NET MVC 5 示例项目 (250 kB; Visual Studio 2013, LocalDB)
下载 DayPilot Lite for ASP.NET MVC - 源代码和二进制文件 [mvc.daypilot.org]
在线演示 [mvc.daypilot.org]

引言

本示例项目展示了如何使用开源的 DayPilot Lite for ASP.NET MVC 库 (Apache License 2.0) 来构建一个 AJAX 事件日历 (日程表)。我们将使用 ASP.NET MVC 5、Visual Studio 和 LocalDB SQL Server 来构建我们的示例。

在线演示

自 DayPilot Lite for MVC 1.3 版本起，已支持月度事件日历视图。

我们只需要 80 行代码 即可实现 完整的拖放功能 (创建、移动和调整事件大小)。

需要三个步骤

库: 将 DayPilot.Web.Mvc.dll 和脚本添加到您的项目中，并添加引用。
视图: 创建一个新的 MVC Razor 视图，并使用 Html.DayPilotCalendar 扩展添加 DayPilot Calendar 小部件。
控制器: 创建一个 MVC 控制器来提供数据。

CSS 主题 (v1.4 新增)

自 v1.4 起，DayPilot Lite 与 DayPilot Lite for JavaScript [javascript.daypilot.org] 共享 JavaScript 核心。另请参阅 HTML5 事件日历 (开源) [code.daypilot.org]。

DayPilot Lite for ASP.NET MVC 1.4 [mvc.daypilot.org] 引入了完整的 CSS 样式支持，包括 CSS 主题。您也可以在在线 CSS 主题设计器 [themes.daypilot.org] 中构建自己的主题。

类似 Google 的 CSS 主题

透明 CSS 主题

绿色 CSS 主题

白色 CSS 主题

传统 CSS 主题

1. DayPilot.Web.Mvc 库

下载 DayPilot Lite for ASP.NET MVC 开源包。

将包中 Scripts 文件夹下的 DayPilot JavaScript 文件复制到您的项目 (Scripts/DayPilot)

daypilot-all.min.js

将包中 Binary 文件夹下的 DayPilot.Web.Mvc.dll 复制到您的项目 (Bin)。

添加对 DayPilot.Web.Mvc.dll 的引用

2. MVC 视图 (8 行代码)

创建新的 ASP.NET MVC 视图 (Views/Home/Index.cshtml)

@{ ViewBag.Title = "ASP.NET MVC Razor Event Calendar"; }
<h2>ASP.NET MVC Razor Event Calendar</h2>

添加 DayPilot JavaScript 库

<script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>

添加事件日历初始化代码

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
})

请注意，所需的最少代码量非常少。它只需指向将通过 AJAX 调用提供日历事件数据的后端 MVC 控制器 (“~/Home/Backend”)。

别忘了在 /Views/Web.config 中添加 DayPilot.Web.Mvc 命名空间，以便它能识别 Html.DayPilotCalendar 辅助方法

<configuration>
  <system.web.webPages.razor>
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        ...
        <add namespace="DayPilot.Web.Mvc"/>
      </namespaces>
    </pages>
  </system.web.webPages.razor>
</configuration>

这是我们带有事件日历的全新 MVC 视图的完整代码

@{ ViewBag.Title = "ASP.NET MVC Razor Event Calendar"; }

<h2>ASP.NET MVC Razor Event Calendar</h2>

<script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
  BackendUrl = Url.Content("~/Home/Backend")
})

3. MVC 控制器 (34 行代码)

创建新的 MVC 控制器 (Controllers/HomeController.cs)

public class HomeController : Controller
{
  public ActionResult Index()
  {
    return View();
  }
}

为日历后端添加一个新的操作处理程序。它将作为 /Home/Backend 访问。

public ActionResult Backend()
{
  return new Dpc().CallBack(this);
}

此操作将把控制权传递给派生自 DayPilotCalendar 的自定义 Dpc 类的新实例。

class Dpc : DayPilotCalendar
{
  protected override void OnInit(InitArgs e)
  {
    var db = new DataClasses1DataContext();
    Events = from ev in db.events select ev;

    DataIdField = "id";
    DataTextField = "text";
    DataStartField = "eventstart";
    DataEndField = "eventend";

    Update();
  }
}

我们使用 Visual Studio 2010 向导生成的 LINQ to SQL 类 (DataClasses1.dbml) 从名为 "events" 的简单 MS SQL 表加载了日历事件数据。

"events" 表具有非常简单的结构

数据库架构

CREATE TABLE [dbo].[Event] (
    [id]         INT          IDENTITY (1, 1) NOT NULL,
    [text]       VARCHAR (50) NOT NULL,
    [eventstart] DATETIME     NOT NULL,
    [eventend]   DATETIME     NOT NULL,
    CONSTRAINT [PK_Event] PRIMARY KEY CLUSTERED ([id] ASC)
);

您可以使用自己的数据库架构。无论如何，都需要告诉 DayPilotCalendar 使用哪些字段。以下字段是必需的：

id (使用 DataIdField 映射此字段)
start (使用 DataStartField 映射此字段)
end (使用 DataEndField 映射此字段)
text (使用 DataTextField 映射此字段)

我们通过以下代码将事件数据加载到 "Events" 属性中，并指定日历应使用哪些字段

// load data
Events = from ev in db.events select ev;

// field mapping
DataIdField = "id";
DataTextField = "text";
DataStartField = "eventstart";
DataEndField = "eventend";

调用 Update() 将日历事件数据发送到客户端并更新显示。

这是为客户端通过 AJAX 提供日历事件数据的完整 MVC 控制器代码

using System;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DayPilot.Web.Mvc;
using DayPilot.Web.Mvc.Events.Calendar;

namespace DayPilotCalendarMvc.Controllers
{
  public class HomeController : Controller
  {
    public ActionResult Index()
    {
      return View();
    }

    public ActionResult Backend()
    {
      return new Dpc().CallBack(this);
    }

    class Dpc : DayPilotCalendar
    {
      protected override void OnInit(InitArgs e)
      {
        var db = new DataClasses1DataContext();
        Events = from ev in db.events select ev;

        DataIdField = "id";
        DataTextField = "text";
        DataStartField = "eventstart";
        DataEndField = "eventend";

        Update();
      }
    }
  }
}

4. 添加 AJAX 拖放功能 (38 行代码)

为了启用拖放功能 (创建、移动和调整事件大小)，我们需要在视图中添加以下几行 (四个新行)

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
  EventMoveHandling = DayPilot.Web.Mvc.Events.Calendar.EventMoveHandlingType.CallBack,
  EventResizeHandling = DayPilot.Web.Mvc.Events.Calendar.EventResizeHandlingType.CallBack,
  TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Calendar.TimeRangeSelectedHandlingType.JavaScript,
  TimeRangeSelectedJavaScript = "dpc.timeRangeSelectedCallBack(start, 
        end, null, { name: prompt('New Event Name:', 'New Event') });"
})

控制器也必须进行扩展。它将处理事件 (EventMove, EventResize, and TimeRangeSelected) 并更新数据库 (34 行新代码)。

using System;
using System.Linq;
using System.Web.Mvc;
using DayPilot.Web.Mvc;
using DayPilot.Web.Mvc.Enums;
using DayPilot.Web.Mvc.Events.Calendar;

namespace DayPilotCalendarMvc.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Backend()
        {
            return new Dpc().CallBack(this);
        }

        class Dpc : DayPilotCalendar
        {
            DataClasses1DataContext db = new DataClasses1DataContext();

            protected override void OnInit(InitArgs e)
            {
                Update(CallBackUpdateType.Full);
            }

            protected override void OnEventResize(EventResizeArgs e)
            {
                var toBeResized = (from ev in db.Events where ev.id == Convert.ToInt32(e.Id) select ev).First();
                toBeResized.eventstart = e.NewStart;
                toBeResized.eventend = e.NewEnd;
                db.SubmitChanges();
                Update();
            }

            protected override void OnEventMove(EventMoveArgs e)
            {
                var toBeResized = (from ev in db.Events where ev.id == Convert.ToInt32(e.Id) select ev).First();
                toBeResized.eventstart = e.NewStart;
                toBeResized.eventend = e.NewEnd;
                db.SubmitChanges();
                Update();
            }

            protected override void OnTimeRangeSelected(TimeRangeSelectedArgs e)
            {
                var toBeCreated = new Event {eventstart = e.Start, 
                                             eventend = e.End, text = (string) e.Data["name"]};
                db.Events.InsertOnSubmit(toBeCreated);
                db.SubmitChanges();
                Update();
            }

            protected override void OnFinish()
            {
                if (UpdateType == CallBackUpdateType.None)
                {
                    return;
                }

                Events = from ev in db.Events select ev;

                DataIdField = "id";
                DataTextField = "text";
                DataStartField = "eventstart";
                DataEndField = "eventend";
            }
        }
    }
}

5. 奖励：周视图 (+1 行)

切换到周视图就像在视图中添加一行代码一样简单

ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,

它应该放在这里

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
  ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,
  EventMoveHandling = DayPilot.Web.Mvc.Events.Calendar.EventMoveHandlingType.CallBack,
  EventResizeHandling = DayPilot.Web.Mvc.Events.Calendar.EventResizeHandlingType.CallBack,
  TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Calendar.TimeRangeSelectedHandlingType.JavaScript,
  TimeRangeSelectedJavaScript = 
    "dpc.timeRangeSelectedCallBack(start, end, null, { name: prompt('New Event Name:', 'New Event') });"
})

其他支持的 ViewType 模式有 WorkWeek 和 Days (自定义天数，通过 Days 属性设置)。

月视图 (v1.3 新增)

另请参阅月度事件日历教程

教程: ASP.NET MVC 和 jQuery 月度事件日历 (开源) [DayPilot Code]

另请参阅

AngularJS 事件日历/日程表 (开源) [code.daypilot.org]
使用 DayPilot 2 (类似 Outlook 的日历/日程安排控件，适用于 ASP.NET) [CodeProject]
DayPilot Scheduler 控件 for ASP.NET [CodeProject]
DayPilot - 为 ASP.NET 构建类似 Outlook 的日历组件 [CodeProject]
如何在 ASP.NET MVC 3 Razor 中显示事件日历 [DayPilot KB]
jQuery (ASP.NET MVC) 事件日历 [DayPilot KB]

历史

2017 年 1 月 30 日 - DayPilot Lite for ASP.NET MVC 1.5 SP3 可用 (包括对月度日历事件自定义的支持)
2016 年 6 月 28 日 - 发布 DayPilot Lite for ASP.NET MVC 1.5 SP2 (包括对事件自定义的支持 - HTML、背景色、边框色等)
2016 年 1 月 28 日 - 发布 DayPilot Lite for ASP.NET MVC 1.5 SP1
2015 年 6 月 9 日 - 发布 DayPilot Lite for ASP.NET MVC 1.5，示例已更新以使用新版本
2014 年 4 月 15 日 - 发布 DayPilot Lite for ASP.NET MVC 1.4 (完整的 CSS 支持)，所有示例项目均已更新至 1.4
2014 年 1 月 31 日 - 添加 ASP.NET MVC 5 示例下载，发布 DayPilot Lite for ASP.NET MVC 1.3 SP3
2013 年 10 月 24 日 - 添加 ASP.NET MVC 4 示例下载
2013 年 6 月 19 日 - 发布 DayPilot Lite for ASP.NET MVC 1.3 SP1
2013 年 3 月 21 日 - 发布 DayPilot Lite for ASP.NET MVC 1.3
2013 年 3 月 19 日 - 发布 DayPilot Lite for ASP.NET MVC 1.2 SP3
2012 年 12 月 11 日 - 发布 DayPilot Lite for ASP.NET MVC 1.2 SP2
2012 年 11 月 21 日 - 发布 DayPilot Lite for ASP.NET MVC 1.2 SP1
2012 年 10 月 4 日 - DayPilot Lite for ASP.NET MVC 1.2 - 支持 ASP.NET MVC4
2012 年 9 月 4 日 - DayPilot Lite for ASP.NET MVC 1.1
2012 年 7 月 5 日 - 发布 DayPilot Lite for ASP.NET MVC 1.0 SP1