search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

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

Related article: Monthly Event Calendar for ASP.NET MVC and jQuery (Open-Source)
Asked by Mike
1 year ago.

Hi,

The document gets really hard to follow after the first few steps. Instead of giving complete code it bounces around instead of focusing on one area and is very hard to follow.

I understand up till AJAX Calendar Event Moving.

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

I'm not sure where to add the code and in what controler/handle/index etc to edit code.
I'm also not showing any file called ("~/Home/Backend"), or where to get it.

I'm also getting an error DayPilotMonthConfig cannot be found when adding the code to index.chtml.
I'm getting an error with the following code in HomeController.cs var db = new DataClasses1DataContext();
No namespace can be found.

Any help provided would be great. I'm new to coding and would like to learn the how to steps for stuff like this.

Answer posted by Dan Letecky [DayPilot]
1 year ago.

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
This question is more than 6 months old and has been closed. Please create a new question if you have anything to add.