超级简单！80行代码实现Google日历（拖放、移动、AJAX）_.NET_编程开发_程序员俱乐部

80行代码实现Google日历

Introduction

本实例介绍使用DayPilot Lite for ASP.NET MVC library 类来实现类google日历效果。

在线实例 

• 天视图 
• 星期视图 
• 拖放调整 
• 拖放移动 

   

  我们将使用80行代码来实现ajax 添加备忘，拖放

  首先准备：

   

• 类库:在你的项目中引入 DayPilot.Web.Mvc.dll 
• 视图: 使用 Html.DayPilotCalendar扩展建立一个DayPilot Calendar 
• 控制器: 建立一个 MVC 控制器

  1. DayPilot.Web.Mvc 类库

  下载 DayPilot Lite for ASP.NET MVC 包

  在 Scripts 文件夹中复制 DayPilot JavaScript 到你的项目(Scripts/DayPilot):

• daypilot-all.min.js

  从bin目录复制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"),

  })

  Note that the minimum required code is quite short. It only has to point to the backend MVC controller ("~/Home/Backend") that will supply the calendar event data using an AJAX call.

  在配置中添加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>

  完整代码：

   

  @{ 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();

  }

  }

  为日历添加一个 handler 叫作/Home/Backend.

   

  public ActionResult Backend()

  {

  return new Dpc().CallBack(this);

  }

   

   

  DayPilotCalendar:

   

   

  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();

  }

  }

   

  我们使用 linq to sql从一个sql数据库取得数据 (DataClasses1.dbml).

  

  "events" 表结构

  

   

  DataIdField = "id";

  DataTextField = "text";

  DataStartField = "eventstart";

  DataEndField = "eventend";

  所有动作将引发 Update() 

  

   

   

  这里是日历所有的控制器代码：（使用ajax)

   

   Collapse | Copy Code

  using System;

  using System.Linq;

  using System.Web;

  using System.Web.Mvc;

  using DayPilot.Web.Mvc;

  using DayPilot.Web.Mvc.Events.Calendar;

   

  namespace DayPilotCalendarMvc3.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') });"

  })

  事件处理

  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 DayPilotCalendarMvc3.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') });"

  })

   

  月视图

  

  翻译自外网。