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.

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 (LocalDB)
  • Uses ASP.NET MVC 4 Razor engine
  • Source code in both C# and VB.NET
  • Visual Studio 2017

Requirements

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.

ASP.NET MVC Calendar: 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,
  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,
  .ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Day,
  .EventClickHandling = EventClickHandlingType.JavaScript,
  .EventClickJavaScript = "edit(e.id())",
  .TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
  .TimeRangeSelectedJavaScript = "create(start, end)"
})

ASP.NET MVC Calendar: 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,
  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,
  .ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,
  .EventClickHandling = EventClickHandlingType.JavaScript,
  .EventClickJavaScript = "edit(e.id())",
  .TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
  .TimeRangeSelectedJavaScript = "create(start, end)"
})

ASP.NET MVC Calendar: 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,
  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,
  .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
{
  ShowMonths = 3,
  SkipMonths = 3
})

VB View (Index.vbhtml)

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

Calendar CSS Themes

All controls use the default (built-in) theme. You can also create your own CSS theme using the online WYSIWYG theme designer and apply it using Theme property of the config.

Calendar Toolbar for Switching the View

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

See Also

This tutorial is also available for ASP.NET WebForms: