Features

DayPilot Lite for ASP.NET MVC 1.3 introduces an AJAX monthly event calendar.

It can be used with the existing daily event calendar:

ajax-daily-event-calendar-asp-net-mvc.png

And weekly event calendar:

ajax-weekly-event-calendar-asp-net-mvc.png

See also the tutorial on using the daily and weekly event calendar.

Sample Project

The sample project includes:

Online Demo

Requirements

  • .NET Framework 4.0 or higher
  • ASP.NET MVC 4
  • Visual Studio 2010 or higher
  • Microsoft SQL Server 2008 (Express) or higher  

License

The source code of this sample project is licensed under the Apache Software License 2.0.

Features

This tutorial shows how to create a full drag and drop monthly event calendar in a few easy steps.

  • Loading events from a database (SQL Server, LINQ)
  • C# source code
  • ASP.NET MVC helper initialization code/jQuery initialization code
  • Event creating using drag and drop
  • Event moving using drag and drop
  • Event resizing using drag and drop

Project Setup

Download DayPilot Lite for ASP.NET MVC open-source package.

Copy DayPilot JavaScript file from the Scripts folder of the package to your project (Scripts/DayPilot):

  • daypilot-all.min.js

Copy DayPilot.Web.Mvc.dll from the Binary folder of the package to your project (Bin).

Add a reference to DayPilot.Web.Mvc.dll:

event-calendar-mvc-add-reference.png

ASP.NET MVC View

ajax-monthly-event-calendar-asp-net-mvc-jquery.png

Create a new MVC view (Views/Home/Index.cshtml):

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

Add DayPilot JavaScript libraries:

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

Add the event calendar initialization code:

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

You can see 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.

Don't forget to add DayPilot.Web.Mvc namespace to /Views/Web.config so it recognizes the Html.DayPilotMonth helper:

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

This is the complete code of our new MVC view with the event calendar:

@{ 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"),
})

DayPilot also includes a jQuery plugin. You can use it instead of the MVC HTML helper:

@{ 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/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>

<div id="dpm"></div>

<script type="text/javascript">
var dp;

$(document).ready(function() {
  dp = $("#dpm").daypilotMonth({
    backendUrl: '@Url.Content("~/Home/Backend")'
  });
});
</script>

ASP.NET MVC Controller

Create a new ASP.NET MVC controller (Controllers/HomeController.cs):

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

Add a new action handler for the calendar backend. It will be accessible as /Home/Backend.

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

Loading Calendar Events

This action will pass control to a new instance of a custom Dpm class that derives from DayPilotMonth:

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

We have loaded the calendar event data from a simple MS SQL table called "events" using a LINQ to SQL classes generated using Visual Studio 2010 wizard (DataClasses1.dbml).

event-calendar-mvc-linq-to-sql.png

The "Event" table contains four fields (id, text, eventstart, eventend):

ajax-monthly-event-calendar-sql-server.png

The table fields are mapped to the required DayPilotMonth fields using Data*Field properties:

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

Calling Update() will refresh the calendar event data on the client side. 

And here is the complete code of the MVC controller that supplies the calendar event data to the client using AJAX:

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

AJAX Calendar Event Moving

ajax-monthly-event-calendar-event-moving.png

In order to enable the drag and drop event moving  we need to add  EventMoveHandling to the config:

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

jQuery style config:

<div id="dpm"></div>

<script type="text/javascript">
var dp;

$(document).ready(function() {
  dp = $("#dpm").daypilotMonth({
    backendUrl: '@Url.Content("~/Home/Backend")',
    eventMoveHandling: "CallBack"
  });
});
</script>

The controller must be extended as well. It will handle the EventMove event and update the database:

 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();
  }
  // ...
}

AJAX Calendar Event Resizing

ajax-monthly-event-calendar-event-resizing.png

In order to enable the drag and drop event resizing we need to add EventResizeHandling to the config: 

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

jQuery style config:

<div id="dpm"></div>

<script type="text/javascript">
var dp;

$(document).ready(function() {
  dp = $("#dpm").daypilotMonth({
    backendUrl: '@Url.Content("~/Home/Backend")',
    eventResizeHandling: "CallBack"
  });
});
</script>

The controller must be extended as well. It will handle the EventResize event and update the database:

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

Creating a New Calendar Event

ajax-monthly-event-calendar-event-creating.png

In order to enable the drag and drop event resizing we need to add TimeRangeSelectedHandling and TimeRangeSelectedJavaScript to the config: 

@Html.DayPilotMonth("dp", new DayPilotMonthConfig
{
  BackendUrl = Url.Content("~/Home/Backend"),
  TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Month.TimeRangeSelectedHandlingType.JavaScript,
  TimeRangeSelectedJavaScript = "dp.timeRangeSelectedCallBack(start, end, { name: prompt('New Event Name:', 'New Event') });"
})

jQuery style config:

<div id="dpm"></div>

<script type="text/javascript">
var dp;

$(document).ready(function() {
  dp = $("#dpm").daypilotMonth({
    backendUrl: '@Url.Content("~/Home/Backend")',
    timeRangeSelectedHandling: "JavaScript",
    onTimeRangeSelected: function(start, end) { dp.timeRangeSelectedCallBack(start, end, { name: prompt('New Event Name:', 'New Event') }); }
  });
});
</script>

The controller must be extended as well. It will handle the TimeRangeSelected event and update the database:

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