asp.net mvc scheduler

Demo Download

DayPilot Scheduler is a time line with multiple resources on the vertical axis.

See Also

Tutorials

Scheduler Features

Scheduler Timeline

scheduler asp.net mvc timeline

The X axis of the scheduler displays a timeline.

  • The time cell duration is customizable (in minutes).
  • The total timeline length is customizable (in days).
  • The time headers can display several levels (grouped by hour, day, week, month, year).
  • Selected time columns can be hidden (non-business hours, weekends).

More about time header.

Resources

scheduler asp.net mvc resources

The scheduler displays custom resources on the Y axis.

  • The resources can be arranged in a tree hierarchy. 
  • Resource tree children can be loaded dynamically for improved performance.
  • Each resource can display custom columns with additional parameters.

More about rows/resources.

Events and Drag and Drop

scheduler asp.net mvc drag drop

The scheduler supports event drag and drop operations:

  • event creating
  • event moving
  • event resizing

Events can be customized easily (CSS class, background color, HTML, active areas). You can disabled selected actions (clicking, moving, context menu...) for individual events to make them read-only.

More about events.

jQuery Scheduler

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

<div id="dps_jquery"></div> 

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

More about scheduler jQuery plugin.

Integrated UI Controls

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

Read more about integrated scheduler controls.

Full CSS Support

The scheduler can be fully styled using CSS.

Read more about scheduler CSS.

CSS Themes

The scheduler comes with 5 standard CSS themes (scheduler_white, scheduler_8, scheduler_green, scheduler_transparent, scheduler_blue). You can create your own theme using the online theme designer.

White CSS Theme

scheduler asp.net mvc css theme white

Windows 8 CSS Theme

scheduler asp.net mvc css theme 8

Transparent CSS Theme

scheduler asp.net mvc css theme transparent

Green CSS Theme

scheduler asp.net mvc css theme green

Blue CSS Theme

scheduler asp.net mvc css theme blue

Mobile and Touch Devices Support

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

Read more about mobile and touch devices support.

Scheduler Customizations

All scheduler elements can be customized (resources, events, background cells, time headers).

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

Localization

The scheduler 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.

Documentation

Server-Side API Reference

Client-Side API Reference

Quick Start

MVC View

Views/Scheduler/Index.cshtml

@using DayPilot.Web.Mvc;
@using DayPilot.Web.Mvc.Events.Scheduler;
@using DayPilot.Web.Mvc.Enums.Scheduler;
<!DOCTYPE html>
<html>
<head>
    <!-- ... -->
    <title>Scheduler for ASP.NET MVC</title>
    <script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Themes/scheduler_white.css")" rel="stylesheet" type="text/css" />
</head>
<body>

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig
{
  BackendUrl = Url.Content("~/Scheduler/Backend"),
  EventResizeHandling = EventResizeHandlingType.CallBack,
  EventMoveHandling = EventMoveHandlingType.CallBack,
  CellGroupBy = GroupBy.Month,
  CellDuration = 1440,
  Days = 365,
  StartDate = new DateTime(DateTime.Today.Year, 1, 1),
	CssOnly = true,
	CssClassPrefix = "scheduler_white",
	EventHeight = 25
})

</body>
</html>

MVC Controller

Controller/SchedulerController.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.Scheduler;

public class SchedulerController : Controller
{
  //
  // GET: /Scheduler/
  
  public ActionResult Index()
  {
      return View();
  }
  
  //
  // POST: /Scheduler/Backend
 
  public ActionResult Backend()
  {
      return new Dps().CallBack(this);
  }

  class Dps : DayPilotScheduler
  {
      protected override void OnInit(InitArgs e)
      {
          LoadResources();
          UpdateWithMessage("Welcome!", CallBackUpdateType.Full);
      }

      private void LoadResources()
      {
          foreach (DataRow r in new EventManager().GetResources().Rows)
          {
              Resources.Add((string) r["name"], Convert.ToString(r["id"]));
          }
      }

      protected override void OnEventResize(EventResizeArgs e)
      {
          new EventManager().EventMove(e.Id, e.NewStart, e.NewEnd, e.Resource);
          UpdateWithMessage("The event was resized.");
      }

      protected override void OnEventMove(EventMoveArgs e)
      {
          new EventManager().EventMove(e.Id, e.NewStart, e.NewEnd, e.NewResource);
          UpdateWithMessage("The event was moved.");
      }

      protected override void OnFinish()
      {
          if (UpdateType == CallBackUpdateType.None)
          {
              return;
          }

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

          DataIdField = "id";
          DataTextField = "name";
          DataStartField = "eventstart";
          DataEndField = "eventend";
          DataResourceField = "resource";
      }
  }
}