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

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

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.

ASP.NET MVC Calendar: Day View

event calendar asp.net mvc day

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

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

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

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

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: