1.项目设置（00:00:00-00:03:00）

2. ASP.NET MVC视图（00:03:00-00:04:00）

3.茶歇（00:04:00-00:05:00）

4. ASP.NET MVC控制器（00:05:00-00:05:30）

5.加载日历事件（00:05:30-00:08:00）

6.拖放日历事件移动（00:08:00-00:10:00）

CSS主题（1.4版）

透明CSS日历主题

Google类CSS日历主题

绿色CSS日历主题

传统CSS日历主题

事件自定义（1.5版）

1.项目设置（00:00:00-00:03:00）

下载用于ASP.NET MVC开源软件包的DayPilot Lite。下载包很小，因此您不会花太多时间下载它。

将DayPilot JavaScript文件从程序包的Scripts文件夹复制到您的项目（Scripts/DayPilot）：

daypilot-all.min.js

将DayPilot.Web.Mvc.dll从包的Binary文件夹复制到您的项目（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"),
})

您会看到所需的最少代码很短。它仅需指向后端MVC控制器（“~/Home/Backend”），该控制器将使用AJAX调用提供日历事件数据。

不要忘记将DayPilot.Web.Mvc命名空间添加到/Views/Web.config中，以便它识别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向导（DataClasses1.dbml）生成的LINQ to SQL类从名为events的简单MS SQL表中加载了日历事件数据。

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

DayPilotMonth使用Data*Field属性将表字段映射到必填字段：

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）

为了启用拖放事件移动，我们需要添加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版）

用于ASP.NET MVC 1.4的DayPilot Lite提供了对CSS主题的支持[doc.daypilot.org]。包括以下主题。

透明CSS日历主题

Google类CSS日历主题

绿色CSS日历主题

传统CSS日历主题

事件自定义（1.5版）

从1.5 SP3版本开始，用于ASP.NET MVC的DayPilot Lite支持事件自定义 [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 sourcee.BackgroundColor = (string) e.DataItem["color"];
}

可以自定义的属性：

Html
CssClass
BackgroundColor
BorderColor
FontColot
ToolTip

DayPilot——10分钟内用于ASP.NET MVC的AJAX每月事件日历

1.项目设置（00:00:00-00:03:00）

2. ASP.NET MVC视图（00:03:00-00:04:00）

3.茶歇（00:04:00-00:05:00）

4. ASP.NET MVC控制器（00:05:00-00:05:30）

5.加载日历事件（00:05:30-00:08:00）

6.拖放日历事件移动（00:08:00-00:10:00）

CSS主题（1.4版）

透明CSS日历主题

Google类CSS日历主题

绿色CSS日历主题

传统CSS日历主题

事件自定义（1.5版）

相关计划文章和项目

DayPilot——10分钟内用于ASP.NET MVC的AJAX每月事件日历相关推荐

最新文章

热门文章