Monthly Event Calendar - Steps after AJAX Calendar Event Moving not clear

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