DayPilot Knowledge Base

AJAX Calendar/Scheduling Controls
DayPilot Pro (AJAX Calendar Control)
» DayPilot AJAX Calendar
DayPilot Pro (AJAX Monthly Calendar Control)
» DayPilot AJAX Monthly Calendar
DayPilot Pro (AJAX Scheduler Control)
» DayPilot AJAX Scheduler
DayPilot » Knowledge Base » Event Calendar for jQuery (ASP.NET MVC)

Event Calendar for jQuery (ASP.NET MVC)

Last revision: Jun 18, 2013

With DayPilot Calendar for ASP.NET MVC it is possible to  create the calendar widget using a jQuery plugin. DayPilot is available in two editions: 

Online Demos

Event Calendar for ASP.NET MVC jQuery Plugin Demo (DayPilot Lite, open-source)

ajax-event-calendar-mvc-jquery-plugin-open-source.png

Event Calendar for ASP.NET MVC jQuery Plugin Demo (DayPilot Pro, commercial)

ajax-event-calendar-mvc-jquery-plugin-pro.png

Event Calendar jQuery Plugin

DayPilot makes it easy to create an event calendar using jQuery. It supports AJAX drag&drop calendar event operations:

Download

The source code (JavaScript, C#) of this example is included in both DayPilot packages:

Client-Side Code Example

Minimal Code

This example displays a weekly calendar and points the event calendar to the data source.

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

<script type="text/javascript">
  $(document).ready(function() {
    $("#dpc").daypilotCalendar({
      backendUrl: '<%= ResolveUrl("~/Calendar/Backend") %>',
      viewType: "Week"
    });
  });
</script>

Calendar event creating, moving, and resizing

This example enables event creating, moving, and resizing. 

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

<script type="text/javascript">
  $(document).ready(function() {
    
    $("#dpc").daypilotCalendar({
      backendUrl: '<%= ResolveUrl("~/Calendar/Backend") %>',
      viewType: "Week",
      timeRangeSelectedHandling: "JavaScript",
      onTimeRangeSelected: function(start, end) { createEvent(start, end); },
      eventMoveHandling: "CallBack",
      eventResizeHandling: "CallBack"
    });

  });
</script>

Server-Side Code Example (ASP.NET MVC)

Minimal code

The ASP.NET MVC server-side helper simplifies the data loading to three simple steps:

  1. Assign your events list (any IEnumerable) to Events property.
  2. Set the key property names (start, end, text, id)
  3. Call Update().
[HandleError]
public class CalendarController : Controller
{
  public ActionResult Backend()
  {
    return new Dpc().CallBack(this);
  }

  public class Dpc : DayPilotCalendar
  {
    protected override void OnInit(InitArgs initArgs)
    {

      Events = new EventManager(Controller).Data.AsEnumerable();

      DataStartField = "start";
      DataEndField = "end";
      DataTextField = "text";
      DataIdField = "id";

      Update(CallBackUpdateType.Full);
    }
  }
}

Calendar event creating, moving, and resizing

You can handle the user actions (event creating, moving, and resizing) by adding an override for the appropriate method:

  1. OnEventMove
  2. OnEventResize
  3. OnTimeRangeSelected
[HandleError]
public class CalendarController : Controller
{

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

  public class Dpc : DayPilotCalendar
  {
    protected override void OnTimeRangeSelected(TimeRangeSelectedArgs e)
    {
      string name = (string)e.Data["name"];
      if (String.IsNullOrEmpty(name))
      {
        name = "(default)";
      }
      new EventManager(Controller).EventCreate(e.Start, e.End, name);
      Update();
    }

    protected override void OnEventMove(DayPilot.Web.Mvc.Events.Calendar.EventMoveArgs e)
    {
      new EventManager(Controller).EventMove(e.Id, e.NewStart, e.NewEnd);
      Update();
    }

    protected override void OnEventResize(DayPilot.Web.Mvc.Events.Calendar.EventResizeArgs e)
    {
      new EventManager(Controller).EventMove(e.Id, e.NewStart, e.NewEnd);
      Update();
    }

    protected override void OnInit(InitArgs initArgs)
    {
      Update(CallBackUpdateType.Full);
    }

    protected override void OnFinish()
    {
      // only load the data if an update was requested by an Update() call
      if (UpdateType == CallBackUpdateType.None)
      {
        return;
      }

      // this select is a really bad example, no where clause
      Events = new EventManager(Controller).Data.AsEnumerable();

      DataStartField = "start";
      DataEndField = "end";
      DataTextField = "text";
      DataIdField = "id";
    }

  }
}

More Tutorials

Event Calendar for ASP.NET MVC 4 Razor (C#, VB.NET, SQL Server)

event-calendar-for-asp-net-mvc-4-razor.png

This tutorial shows how to use the DayPilot Pro MVC Calendar with MVC 4 and Razor engine. It will load calendar events from a database (SQL Server), and allow event creating using TimeRangeSelected event and event moving using drag&drop.

Scheduler for ASP.NET MVC 4 Razor (C#, VB.NET, SQL Server)

scheduler-for-asp-net-mvc-4-razor.png

This tutorial shows how to use the DayPilot Pro MVC Scheduler with MVC 4 and Razor engine. It will load scheduled events from a database (SQL Server), and allow event creating using TimeRangeSelected event and event moving using drag&drop.

Event Calendar with Day/Week/Month Views in ASP.NET MVC 4 (C#, VB.NET, SQL Server)

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

This tutorial shows how to use the DayPilot Pro MVC CalendarMonth and Navigator controls integrated. The toolbar with Day, Week, and Month buttons allows fast view switching. It supports drag and drop operations (event creating, moving, resizing) and event deleting using an integrated icon.

Related

How to show an event calendar in ASP.NET MVC 3 Razor
How to show a modal dialog in ASP.NET MVC 3 Razor
How to use DayPilot Pro for MVC 3 with Razor view engine
How to copy events using drag&drop (Ctrl key)