ASP.NET MVC Event Calendar mvc event calendar

Demo Download

DayPilot Calendar is an AJAX event calendar with day/week views and customizable columns.

See Also



Event Calendar Columns

event calendar mvc columns

The X axis displays days or custom columns (resources, people, machines, locations). Three automatic modes are available:

  • Day
  • Work week
  • Week

There are also two additional manual (flexible) modes:

  • Days (displays custom number of days, 50+)
  • Resources (custom columns; each with an associated resource ID)

Read more about event calendar columns and view types.

Time Headers (Y Axis)

event calendar mvc time header

The Y axis can show up to 24 hours for each column.

  • Custom day start and day hour is supported
  • Overnight schedule (e.g. 6 AM - 5 AM the next day)
  • Custom business hours

Read more about calendar time header.

Events and Drag and Drop

event calendar mvc drag drop

The event calendar supports drag and drop operations:

  • event creating
  • event moving
  • event resizing

Events can be customized individually (CSS class, background color, HTML, active areas). You can disable selected actions depending on the user permissions.

More about events.

jQuery Event Calendar

You can use the built-in jQuery plugin to initialize the calendar control instead of using the Html helper. jQuery is not required.

<div id="dpc"></div> 

<script type="text/javascript"> 
var dps = $("#dpc").daypilotCalendar({ 
  backendUrl: '<%= ResolveUrl("~/Calendar/Backend") %>', 
  height: 300, 
  heightSpec: "Max", 
  timeRangeSelectedHandling: "CallBack", 
  cssClassPrefix: "scheduler_green", 
  eventHeight: 25,
  days: 7

More about event calendar jQuery plugin.

Full CSS Support

The scheduler can be fully styled using CSS.

Read more about calendar CSS.

CSS and Themes

The event calendar comes with 4 standard CSS themes (calendar_white, calendar_green, calendar_transparent, calendar_blue). You can create your own theme using the online theme designer.

White CSS Theme

event calendar mvc css theme white

Transparent CSS Theme

event calendar mvc css theme transparent

Green CSS Theme

event calendar mvc css theme green

Blue CSS Theme

event calendar mvc css theme blue

Integrated UI Controls

  • Integrated message bar for showing custom messages.
  • Context menu
  • Bubble (extended tooltip) for quick showing event details.
  • Active areas with user actions hints.

Read more about integrated calendar controls.

Mobile and Touch Devices Support

The event calendar supports mobile devices (tablets, smartphones) with iOS and Android.

Read more about mobile and touch devices support.

Calendar Customizations

All calendar elements can be customized (columns, events, background cells, time headers).

You can set custom CSS classes, HTML, action restrictions, active areas.


The calendar control will be translated and localized automatically using the current culture. The following properties are adjusted automatically:

  • time format
  • date format
  • clock (12/24 hours)
  • first day of week
  • day names
  • month names

Read more about localization.


Server-Side API Reference

Client-Side API Reference

Quick Start

MVC View (Views/Calendar/Index.cshtml)

@using DayPilot.Web.Mvc.Events.Calendar;
@using DayPilot.Web.Mvc.Enums.Calendar;
<!DOCTYPE html>
    <title>Event Calendar for ASP.NET MVC</title>
    <script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Themes/calendar_white.css")" rel="stylesheet" type="text/css" />
  @Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
    BackendUrl = Url.Content("~/Calendar/Backend"),
    EventResizeHandling = EventResizeHandlingType.CallBack,
    EventMoveHandling = EventMoveHandlingType.CallBack,
    ViewType = ViewType.Day,
    CssOnly = true,
    CssClassPrefix = "calendar_white"    

MVC Controller (Controller/CalendarController.cs)

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DayPilot.Web.Mvc;
using DayPilot.Web.Mvc.Enums;
using DayPilot.Web.Mvc.Events.Calendar;

public class CalendarController : Controller

  // GET: /Calendar/
  public ActionResult Index()
      return View();
  // POST: /Calendar/Backend/

  public ActionResult Backend()
      return new Dpc().CallBack(this);

  class Dpc : DayPilotCalendar
      protected override void OnInit(InitArgs e)

      protected override void OnEventResize(EventResizeArgs e)
          new EventManager().EventMove(e.Id, e.NewStart, e.NewEnd);

      protected override void OnEventMove(EventMoveArgs e)
          new EventManager().EventMove(e.Id, e.NewStart, e.NewEnd);

      protected override void OnFinish()
          if (UpdateType == CallBackUpdateType.None)

          Events = new EventManager().FilteredData(StartDate, StartDate.AddDays(Days)).AsEnumerable();

          DataIdField = "id";
          DataTextField = "name";
          DataStartField = "eventstart";
          DataEndField = "eventend";