This tutorial shows how to integrate day, week and month views with the navigator (date picker) and view-switching toolbar.

event-calendar-asp.net-mvc-toolbar.png

For an introductory tutorial on event calendar project setup and basic event handling please see Event Calendar for ASP.NET MVC 4 Razor (C#, VB.NET, SQL Server) tutorial.

Online Demo

Features

  • Navigator (date picker) displaying three months
  • Fast switching between day, week, and month view
  • Event editing using a modal dialog
  • Drag and drop event creating
  • Drag and drop event moving
  • Drag and drop event resizing
  • Event deleting using [x] icon in the upper-right corner
  • Sample SQL Server database (SQL Server Express)
  • Uses ASP.NET MVC 4 Razor engine
  • Source code in both C# and VB.NET

Requirements

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

Included

License

Licensed for testing and evaluation purposes. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for ASP.NET MVC. Buy a license.

Day View

event-calendar-asp.net-mvc-day.png

The day view is created using DayPilot Calendar control switched to Day mode (ViewType = ViewType.Day).

C# View (Index.cshtml)

@Html.DayPilotCalendar("dp_day", new DayPilotCalendarConfig
{
  BackendUrl = Url.Content("~/Backend/Day"),
  EventResizeHandling = EventResizeHandlingType.CallBack,
  EventMoveHandling = EventMoveHandlingType.CallBack,
  CssOnly = true,
  CssClassPrefix = "calendar_white",
  ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Day,
  EventClickHandling = EventClickHandlingType.JavaScript,
  EventClickJavaScript = "edit(e.id())",
  TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
  TimeRangeSelectedJavaScript = "create(start, end)"
})

VB View (Index.vbhtml)

@Html.DayPilotCalendar("dp_day", New DayPilotCalendarConfig With
{
  .BackendUrl = Url.Content("~/Backend/Day"),
  .EventResizeHandling = EventResizeHandlingType.CallBack,
  .EventMoveHandling = EventMoveHandlingType.CallBack,
  .CssOnly = True,
  .CssClassPrefix = "calendar_white",
  .ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Day,
  .EventClickHandling = EventClickHandlingType.JavaScript,
  .EventClickJavaScript = "edit(e.id())",
  .TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
  .TimeRangeSelectedJavaScript = "create(start, end)"
})

Week View

event-calendar-asp.net-mvc-week.png

The week view is created using DayPilot Calendar control switched to Day mode (ViewType = ViewType.Week).

C# View (Index.cshtml)

@Html.DayPilotCalendar("dp_week", new DayPilotCalendarConfig
{
  BackendUrl = Url.Content("~/Backend/Week"),
  EventResizeHandling = EventResizeHandlingType.CallBack,
  EventMoveHandling = EventMoveHandlingType.CallBack,
  CssOnly = true,
  CssClassPrefix = "calendar_white",
  ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,
  EventClickHandling = EventClickHandlingType.JavaScript,
  EventClickJavaScript = "edit(e.id())",
  TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
  TimeRangeSelectedJavaScript = "create(start, end)"
})

VB View (Index.vbhtml)

@Html.DayPilotCalendar("dp_week", New DayPilotCalendarConfig With
{
  .BackendUrl = Url.Content("~/Backend/Week"),
  .EventResizeHandling = EventResizeHandlingType.CallBack,
  .EventMoveHandling = EventMoveHandlingType.CallBack,
  .CssOnly = True,
  .CssClassPrefix = "calendar_white",
  .ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,
  .EventClickHandling = EventClickHandlingType.JavaScript,
  .EventClickJavaScript = "edit(e.id())",
  .TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
  .TimeRangeSelectedJavaScript = "create(start, end)"
})

Month View

event-calendar-asp.net-mvc-month.png

The month view is created using DayPilot Month control.

C# View (Index.cshtml)

@Html.DayPilotMonth("dp_month", new DayPilotMonthConfig
{
  BackendUrl = Url.Content("~/Backend/Month"),
  EventResizeHandling = DayPilot.Web.Mvc.Events.Month.EventResizeHandlingType.CallBack,
  EventMoveHandling = DayPilot.Web.Mvc.Events.Month.EventMoveHandlingType.CallBack,
  CssOnly = true,
  CssClassPrefix = "month_white",
  EventHeight = 25,
  EventClickHandling = DayPilot.Web.Mvc.Events.Month.EventClickHandlingType.JavaScript,
  EventClickJavaScript = "edit(e.id())",
  TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Month.TimeRangeSelectedHandlingType.JavaScript,
  TimeRangeSelectedJavaScript = "create(start, end)"
})

VB View (Index.vbhtml)

@Html.DayPilotMonth("dp_month", new DayPilotMonthConfig With
{
  .BackendUrl = Url.Content("~/Backend/Month"),
  .EventResizeHandling = DayPilot.Web.Mvc.Events.Month.EventResizeHandlingType.CallBack,
  .EventMoveHandling = DayPilot.Web.Mvc.Events.Month.EventMoveHandlingType.CallBack,
  .CssOnly = true,
  .CssClassPrefix = "month_white",
  .EventHeight = 25,
  .EventClickHandling = DayPilot.Web.Mvc.Events.Month.EventClickHandlingType.JavaScript,
  .EventClickJavaScript = "edit(e.id())",
  .TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Month.TimeRangeSelectedHandlingType.JavaScript,
  .TimeRangeSelectedJavaScript = "create(start, end)"
})

Date Navigator

event-calendar-asp.net-mvc-navigator.png

The date navigation is handled by DayPilot Navigator control.

C# View (Index.cshtml)

@Html.DayPilotNavigator("dp_navigator", new DayPilotNavigatorConfig
{
  CssOnly = true,
  CssClassPrefix = "navigator_white",
  ShowMonths = 3,
  SkipMonths = 3
})

VB View (Index.vbhtml)

@Html.DayPilotNavigator("dp_navigator", New DayPilotNavigatorConfig With
{
  .CssOnly = True,
  .CssClassPrefix = "navigator_white",
  .ShowMonths = 3,
  .SkipMonths = 3
})

CSS Themes

All controls use the white theme which is applied using CssOnly and CssClassPrefix properties:

CssOnly = true,
CssClassPrefix = "calendar_white"

You can also create your own CSS theme using the online WYSIWYG theme designer.

Toolbar

event-calendar-asp.net-mvc-toolbar.png

The toolbar is created using DayPilot.Switcher class that connects the three views (day, week, and month) with the navigator and the toolbar buttons.

The toolbar buttons are simple <a> links:

<div id="toolbar">
  <a href="#" id="toolbar_day">Day</a>
  <a href="#" id="toolbar_week">Week</a>
  <a href="#" id="toolbar_month">Month</a>
</div>

DayPilot.Switcher holds the information about the views, navigator, buttons and connects them:

  • Every toolbar button is linked to a specific view. Clicking the button activates the view.
  • After changing the view, the switched invokes OnCommand event with "navigate" command. This way you can refresh the view.
  • The navigator updates
  • The navigator selectMode (day/week/month) is updated depending on the active view.
<script type="text/javascript">

  var switcher = new DayPilot.Switcher();
  
  // adding views (DayPilot controls)
  switcher.addView(dp_day);
  switcher.addView(dp_week);
  switcher.addView(dp_month);

  // binding the toolbar links (buttons) to views
  switcher.addButton("toolbar_day", dp_day);
  switcher.addButton("toolbar_week", dp_week);
  switcher.addButton("toolbar_month", dp_month);

  // adding navigator
  switcher.addNavigator(dp_navigator);

  // default view
  switcher.show(dp_day);

</script>

You can also switch the views manually using .show() method:

switcher.show(dp_month);

The active control can be reached using .active.control property:

var dp = switcher.active.control;

The selected day is hold in .day property (DayPilot.Date class):

var day = switcher.day;

The server-side OnCommand handler updates the view.

C#

protected override void OnCommand(CommandArgs e)
{
  switch (e.Command)
  {
    case "navigate":
      StartDate = (DateTime) e.Data["day"];
      Update(CallBackUpdateType.Full);
      break;
    case "refresh":
      Update(CallBackUpdateType.EventsOnly);
      break;
  }
}

VB

Protected Overrides Sub OnCommand(ByVal e As CommandArgs)
  Select Case e.Command
    Case "navigate"
      StartDate = CDate(e.Data("day"))
      Update(CallBackUpdateType.Full)
    Case "refresh"
      Update(CallBackUpdateType.EventsOnly)
  End Select
End Sub

Event Deleting

event-calendar-asp.net-mvc-event-deleting.png

We will add an active area to the calendar event that will allow event deleting. 

  • It will become visible on hover.
  • It will fire the server-side OnCommand event handler with Command set to "delete" and event details stored in custom "e" parameter.

C#

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.Areas.Add(new Area().Right(3).Top(3).Width(15).Height(15).CssClass("event_action_delete").JavaScript("switcher.active.control.commandCallBack('delete', {'e': e});"));
}

protected override void OnCommand(CommandArgs e)
{
  switch (e.Command)
  {
    case "delete":
      new EventManager().EventDelete((string) e.Data["e"]["id"]);
      Update(CallBackUpdateType.EventsOnly);
      break;
  }
}

VB

Protected Overrides Sub OnBeforeEventRender(ByVal e As BeforeEventRenderArgs)
  e.Areas.Add((New Area()).Right(3).Top(3).Width(15).Height(15).CssClass("event_action_delete").JavaScript("switcher.active.control.commandCallBack('delete', {'e': e});"))
End Sub

Protected Overrides Sub OnCommand(ByVal e As CommandArgs)
  Select Case e.Command
    Case "delete"
      CType(New EventManager(), EventManager).EventDelete(CStr(e.Data("e")("id")))
      Update(CallBackUpdateType.EventsOnly)
  End Select
End Sub

See Also

This tutorial is also available for ASP.NET WebForms: