Tutorial: ASP.NET MVC 5 Event Calendar

This tutorial shows how to create ASP.NET MVC 5 event calendar. Loading event data from SQL Server, drag and drop support (event creating, moving, resizing), integrated delete icon. Available with C# and VB source.
Jan 22, 2015
asp.net mvc 5 event calendar

Features

  • ASP.NET MVC 5
  • Weekly event calendar
  • Drag and drop event creating
  • Drag and drop event moving
  • Drag and drop event resizing
  • Event deleting
  • Loading events from SQL Server database using LINQ to SQL

Source code of the tutorial is available for download.

Drag and Drop Event Moving Example

asp.net-mvc-5-event-calendar-drag-drop-moving.png

MVC View Configuration

C#

@Html.DayPilotCalendar("dp", new DayPilotCalendarConfig
{
    BackendUrl = Url.Action("Backend", "Calendar"),
    // ...
    EventMoveHandling = EventMoveHandlingType.Notify
})

VB

@Html.DayPilotCalendar("dp", New DayPilotCalendarConfig With
{
    .BackendUrl = Url.Action("Backend", "Calendar"),
    ' ...
    .EventMoveHandling = EventMoveHandlingType.Notify
})

MVC Controller

C#

protected override void OnEventMove(EventMoveArgs e)
{
  var item = (from ev in dc.Events where ev.Id == Convert.ToInt32(e.Id) select ev).First();
  if (item != null)
  {
      item.Start = e.NewStart;
      item.End = e.NewEnd;
      dc.SubmitChanges();                    
  }
}

VB

Protected Overrides Sub OnEventMove(ByVal e As EventMoveArgs)
  Dim item = ( _
      From ev In dc.Events _
      Where ev.Id = Convert.ToInt32(e.Id) _
      Select ev).First()
  If item IsNot Nothing Then
    item.Start = e.NewStart
    item.End = e.NewEnd
    dc.SubmitChanges()
  End If
End Sub

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java