DayPilot - ASP.NET MVC 10分钟实现AJAX月历事件日历

Dan Letecky

4.98/5 (32投票s)

2013年3月21日

Apache

4分钟阅读

101928

3151

在短短10分钟内（包括喝咖啡的时间）创建一个支持拖放的AJAX月历事件日历，该日历将显示来自SQL Server数据库的数据。

下载示例项目 - ASP.NET MVC 4, Visual Studio 2010 (311 kB) [codeproject.com]
下载示例项目 - ASP.NET MVC 5, Visual Studio 2012 (268 kB) [codeproject.com]
下载DayPilot Lite for ASP.NET MVC 1.5 库+源代码 [daypilot.org]
在线演示 [daypilot.org]

开源的DayPilot Lite for ASP.NET MVC 1.3 提供了一个AJAX月历事件日历。

它补充了现有的日历事件日历

以及周历事件日历

另请参阅

AJAX事件日历（调度器） for ASP.NET MVC (80行代码) [codeproject.com]

还有一个独立的JavaScript/HTML5/jQuery事件日历/调度器可用（DayPilot Lite for JavaScript）

有关在ASP.NET MVC和PHP后端中使用DayPilot for JavaScript的详细信息，请参阅HTML5事件日历（开源）教程。

1. 项目设置 (00:00:00 - 00:03:00)

下载 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. ASP.NET MVC 视图 (00:03:00 - 00:04:00)

创建一个新的MVC视图（Views/Home/Index.cshtml）

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

添加DayPilot JavaScript库

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

添加事件日历初始化代码

@Html.DayPilotMonth("dp", new DayPilotMonthConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
})

您可以看到，所需的最低代码相当简短。它只需要指向将使用AJAX调用提供日历事件数据的后端MVC控制器（“~/Home/Backend”）。

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

<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 = "AJAX Monthly Event Calendar for ASP.NET MVC"; }

<h2>AJAX Monthly Event Calendar for ASP.NET MVC</h2>

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

@Html.DayPilotMonth("dp", new DayPilotMonthConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
})

3. 咖啡休息 (00:04:00 - 00:05:00)

现在您可以去泡咖啡了。但不要试图在一分钟内喝完，它太烫了！我们将在几分钟后回来喝咖啡。

4. ASP.NET MVC 控制器 (00:05:00 - 00:05:30)

创建一个新的ASP.NET MVC控制器（Controllers/HomeController.cs）

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

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

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

5. 加载日历事件 (00:05:30 - 00:08:00)

此操作会将控制权传递给一个派生自DayPilotMonth的自定义Dpm类的新实例

class Dpm : DayPilotMonth
{
  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表中加载了日历事件数据。

“Event”表包含四个字段（id, text, eventstart, eventend）

表字段通过Data*Field属性映射到所需的DayPilotMonth字段

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.Month;

namespace DayPilotMonthLiteMvc4.Controllers
{
  public class HomeController : Controller
  {

    public ActionResult Index()
    {
      return View();
    }

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

    class Dpm : DayPilotMonth
    {
      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();
      }
    }
  }
}

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

6. 拖放日历事件移动 (00:08:00 - 00:10:00)

为了启用拖放事件移动，我们需要在config中添加EventMoveHandling

@Html.DayPilotMonth("dp", new DayPilotMonthConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
  EventMoveHandling = DayPilot.Web.Mvc.Events.Month.EventMoveHandlingType.CallBack,
})

控制器也必须扩展。它将处理EventMove事件并更新数据库

class Dpm : DayPilotMonth
{
  // ...
  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();
  }
  // ...
}

阅读更多关于事件移动 [doc.daypilot.org]的信息。

CSS主题 (版本 1.4)

DayPilot Lite for ASP.NET MVC 1.4 带来了对CSS主题的支持 [doc.daypilot.org]。包含以下主题。

透明CSS日历主题

类似Google的CSS日历主题

绿色CSS日历主题

传统CSS日历主题

事件自定义 (版本 1.5)

从版本1.5 SP3开始，DayPilot Lite for ASP.NET MVC 支持事件自定义 [doc.daypilot.org]。您可以使用OnBeforeEventRender事件处理程序在服务器端自定义事件。

示例

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.BackgroundColor = "#FFE599";
  e.BorderColor = "#F1C232";
  e.FontColor = "#000";
}

您还可以根据事件数据对象的自定义字段更改事件属性

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.Html += " owner:" + e.DataItem["owner"];  // accessing the "owner" field 
                                              // from the data source
  e.BackgroundColor = (string) e.DataItem["color"];
}

可自定义的属性

Html
CssClass
BackgroundColor
BorderColor
字体颜色
工具提示

历史

2017年1月16日：新版本（DayPilot Lite for ASP.NET MVC 1.5 SP3）支持事件自定义
2014年5月27日：更新至DayPilot Lite for ASP.NET MVC 1.4，CSS主题
2014年2月11日：更新至DayPilot Lite for ASP.NET MVC 1.3 SP4
2014年2月9日：ASP.NET MVC 5示例项目，DayPilot Lite for ASP.NET MVC 1.3 SP3
2013年11月21日：示例项目更新至DayPilot Lite for ASP.NET MVC 1.3 SP2