To get it working you need these elements:
1. A MVC view with the calendar (Views/Home/Index.cshtml)
2. A controller action for this view (Controllers/HomeController.cs: Index() method)
3. A controller action for the backend (Controllers/HomeController.cs: Backend() method)
Let's go through the items:
1. In the MVC view, include the library (daypilot-all.min.js) and setup the calendar using @Html.DayPilotMonth. This is the complete Home/Index view from the attached project:
@{
ViewBag.Title = "ASP.NET MVC 5 Monthly Event Calendar";
}
<h2>ASP.NET MVC 5 Event Calendar</h2>
<script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>
@Html.DayPilotMonth("dpm", new DayPilotMonthConfig
{
BackendUrl = Url.Content("~/Home/Backend"),
EventMoveHandling = DayPilot.Web.Mvc.Events.Month.EventMoveHandlingType.CallBack,
EventResizeHandling = DayPilot.Web.Mvc.Events.Month.EventResizeHandlingType.CallBack,
TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Month.TimeRangeSelectedHandlingType.JavaScript,
TimeRangeSelectedJavaScript = "dpm.timeRangeSelectedCallBack(start, end, { name: prompt('New Event Name:', 'New Event') });"
})
In your code, you are also using the jQuery plugin but that's an alternative to using the @Html.DayPilotMonth helper. You don't need that, remove it:
// remove this all:
<div id="dpm"></div>
<script>
var dp;
$(document).ready(function() {
dp = $("#dpm").daypilotMonth({
// ...
});
});
2. The HomeController must include an Index() method so that the Home/Index view can be displayed. Nothing special here:
using System;
using System.Linq;
using System.Web.Mvc;
using DayPilot.Web.Mvc;
using DayPilot.Web.Mvc.Enums;
using DayPilot.Web.Mvc.Events.Month;
namespace DayPilotCalendarMvc.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
3. As you have noticed, it's necessary to set BackendUrl property and point it to a controller method that will handle the communication of the client-side component with the backend. So you need to add another method ("Backend") to the HomeController (that's where BackendUrl points). This method passes control to a special class (Dpm) that includes event handlers for the events invoked the client-side component.
This is the complete HomeController.cs source:
using System;
using System.Linq;
using System.Web.Mvc;
using DayPilot.Web.Mvc;
using DayPilot.Web.Mvc.Enums;
using DayPilot.Web.Mvc.Events.Month;
namespace DayPilotCalendarMvc.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Backend()
{
return new Dpm().CallBack(this);
}
class Dpm : DayPilotMonth
{
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";
}
}
}
}
Now you can see there are couple of methods inside Dpm:
- OnInit - this is fired once per page load, after the control is initialized
- OnEventResize - this is fired whenever a user resizes an event
- OnEventMove - this is fired whenever a user moves an event
- OnTimeRangeSelected - this is fired whenever a user selects a cell time range
- OnFinish - this is fired at the end of every callback (i.e. after OnInit, after OnEventMove, etc.).
4. This code refers to a custom database layer code (DataClasses1DataContext is generated by Linq to Sql, see https://msdn.microsoft.com/en-us/library/bb386976%28v=vs.110%29.aspx?f=255&MSPPError=-2147217396). You need to replace it with your own DB access code.
var db = new DataClasses1DataContext();
5. The best way to try things out is to download the sample project and try modifying things there.
Some basic guidelines:
- config goes to Views/Home/Index.cshtml, modify @Html.DayPilotMonth helper parameters
- event handlers go to Dpm class in Controllers/HomeController.cs