![AJAX Event Calendar for ASP.NET MVC](/KB/aspnet/404647/asp.net-mvc-event-calendar-open-source.png)
Introduction
This sample project shows how to build an AJAX Event Calendar (Scheduler) using the open-source DayPilot Lite for ASP.NET MVC library (Apache License 2.0). We will build our sample with ASP.NET MVC 5, Visual Studio, and LocalDB SQL Server.
Online demos:
The monthly event calendar view is supported since DayPilot Lite for MVC 1.3 release.
We will need only 80 lines for code for the full drag&drop functionality (event creating, moving and resizing).
Three steps are necessary:
- Library: Include DayPilot.Web.Mvc.dll and scripts in your project and add a reference to it.
- View: Create a new MVC Razor view and add DayPilot Calendar widget using Html.DayPilotCalendar extension.
- Controller: Create an MVC controller that will supply the data.
CSS Themes (New in 1.4)
Since v1.4, DayPilot Lite shares the JavaScript core with DayPilot Lite for JavaScript [javascript.daypilot.org]. See also HTML5 Event Calendar (Open-Source) [code.daypilot.org].
DayPilot Lite for ASP.NET MVC 1.4 [mvc.daypilot.org] introduces full CSS styling support, including CSS themes. You can also build your own theme in the online CSS theme designer [themes.daypilot.org].
Google-Like CSS Theme
![AJAX Event Calendar for ASP.NET MVC - Google-Like CSS Theme](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
Transparent CSS Theme
![AJAX Event Calendar for ASP.NET MVC - Transparent CSS Theme](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
Green CSS Theme
![AJAX Event Calendar for ASP.NET MVC - Green CSS Theme](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
White CSS Theme
![AJAX Event Calendar for ASP.NET MVC - White CSS Theme](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
Traditional CSS Theme
![AJAX Event Calendar for ASP.NET MVC - Traditional CSS Theme](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
1. DayPilot.Web.Mvc Library
Download DayPilot Lite for ASP.NET MVC open-source package.
Copy DayPilot JavaScript files from the Scripts folder of the package to your project (Scripts/DayPilot):
Copy DayPilot.Web.Mvc.dll from the Binary folder of the package to your project (Bin).
Add a reference to DayPilot.Web.Mvc.dll:
![Add reference to DayPilot.Web.Mvc.dll](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
2. MVC View (8 Lines of Code)
Create a new ASP.NET MVC view (Views/Home/Index.cshtml):
@{ ViewBag.Title = "ASP.NET MVC Razor Event Calendar"; }
<h2>ASP.NET MVC Razor Event Calendar</h2>
Add DayPilot JavaScript libraries:
<script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>
Add the event calendar initialization code:
@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
BackendUrl = Url.Content("~/Home/Backend"),
})
Note that the minimum required code is quite short. It only has to point to the backend MVC controller ("~/Home/Backend") that will supply the calendar event data using an AJAX call.
Don't forget to add DayPilot.Web.Mvc namespace to /Views/Web.config so it recognizes the Html.DayPilotCalendar
helper:
<configuration>
<system.web.webPages.razor>
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
...
<add namespace="DayPilot.Web.Mvc"/>
</namespaces>
</pages>
</system.web.webPages.razor>
</configuration>
This is the complete code of our new MVC view with the event calendar:
@{ ViewBag.Title = "ASP.NET MVC Razor Event Calendar"; }
<h2>ASP.NET MVC Razor Event Calendar</h2>
<script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>
@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
BackendUrl = Url.Content("~/Home/Backend")
})
3. MVC Controller (34 Lines of Code)
Create a new MVC controller (Controllers/HomeController.cs):
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
Add a new action handler for the calendar backend. It will be accessible as /Home/Backend.
public ActionResult Backend()
{
return new Dpc().CallBack(this);
}
This action will pass control to a new instance of a custom Dpc
class that derives from DayPilotCalendar
:
class Dpc : DayPilotCalendar
{
protected override void OnInit(InitArgs e)
{
var db = new DataClasses1DataContext();
Events = from ev in db.events select ev;
DataIdField = "id";
DataTextField = "text";
DataStartField = "eventstart";
DataEndField = "eventend";
Update();
}
}
We have loaded the calendar event data from a simple MS SQL table called "events" using a LINQ to SQL classes generated using Visual Studio 2010 wizard (DataClasses1.dbml).
![LINQ to SQL](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
The "events" table has a very simple structure:
![Events table structure](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
Database schema:
CREATE TABLE [dbo].[Event] (
[id] INT IDENTITY (1, 1) NOT NULL,
[text] VARCHAR (50) NOT NULL,
[eventstart] DATETIME NOT NULL,
[eventend] DATETIME NOT NULL,
CONSTRAINT [PK_Event] PRIMARY KEY CLUSTERED ([id] ASC)
);
You can use your own database schema. In any case, it is necessary to tell DayPilotCalendar which fields to use. The following fields are required:
- id (use DataIdField to map this field)
- start (use DataStartField to map this field)
- end (use DataEndField to map this field)
- text (use DataTextField to map this field)
We load the event data to "Events" property and specify which fields the Calendar should use using the following code:
Events = from ev in db.events select ev;
DataIdField = "id";
DataTextField = "text";
DataStartField = "eventstart";
DataEndField = "eventend";
Calling Update()
will send the calendar event data to the client and update the display:
![ASP.NET Event Calendar for ASP.NET MVC Day View](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
And here is the complete code of the MVC controller that supplies the calendar event data to the client using AJAX:
using System;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DayPilot.Web.Mvc;
using DayPilot.Web.Mvc.Events.Calendar;
namespace DayPilotCalendarMvc.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Backend()
{
return new Dpc().CallBack(this);
}
class Dpc : DayPilotCalendar
{
protected override void OnInit(InitArgs e)
{
var db = new DataClasses1DataContext();
Events = from ev in db.events select ev;
DataIdField = "id";
DataTextField = "text";
DataStartField = "eventstart";
DataEndField = "eventend";
Update();
}
}
}
}
4. Adding AJAX Drag&Drop Functionality (38 Lines of Code)
![AJAX Event Calendar for ASP.NET MVC Drag&Drop](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
In order to enable the drag and drop functionality (event creating, moving, and resizing) we need to add the following lines to the view (four new lines):
@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
BackendUrl = Url.Content("~/Home/Backend"),
EventMoveHandling = DayPilot.Web.Mvc.Events.Calendar.EventMoveHandlingType.CallBack,
EventResizeHandling = DayPilot.Web.Mvc.Events.Calendar.EventResizeHandlingType.CallBack,
TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Calendar.TimeRangeSelectedHandlingType.JavaScript,
TimeRangeSelectedJavaScript = "dpc.timeRangeSelectedCallBack(start,
end, null, { name: prompt('New Event Name:', 'New Event') });"
})
The controller must be extended as well. It will handle the events (EventMove
, EventResize
, and TimeRangeSelected
) and update the database (34 new lines):
using System;
using System.Linq;
using System.Web.Mvc;
using DayPilot.Web.Mvc;
using DayPilot.Web.Mvc.Enums;
using DayPilot.Web.Mvc.Events.Calendar;
namespace DayPilotCalendarMvc.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Backend()
{
return new Dpc().CallBack(this);
}
class Dpc : DayPilotCalendar
{
DataClasses1DataContext db = new DataClasses1DataContext();
protected override void OnInit(InitArgs e)
{
Update(CallBackUpdateType.Full);
}
protected override void OnEventResize(EventResizeArgs e)
{
var toBeResized = (from ev in db.Events where ev.id == Convert.ToInt32(e.Id) select ev).First();
toBeResized.eventstart = e.NewStart;
toBeResized.eventend = e.NewEnd;
db.SubmitChanges();
Update();
}
protected override void OnEventMove(EventMoveArgs e)
{
var toBeResized = (from ev in db.Events where ev.id == Convert.ToInt32(e.Id) select ev).First();
toBeResized.eventstart = e.NewStart;
toBeResized.eventend = e.NewEnd;
db.SubmitChanges();
Update();
}
protected override void OnTimeRangeSelected(TimeRangeSelectedArgs e)
{
var toBeCreated = new Event {eventstart = e.Start,
eventend = e.End, text = (string) e.Data["name"]};
db.Events.InsertOnSubmit(toBeCreated);
db.SubmitChanges();
Update();
}
protected override void OnFinish()
{
if (UpdateType == CallBackUpdateType.None)
{
return;
}
Events = from ev in db.Events select ev;
DataIdField = "id";
DataTextField = "text";
DataStartField = "eventstart";
DataEndField = "eventend";
}
}
}
}
5. Bonus: Week View (+1 Line)
![AJAX Event Calendar for ASP.NET MVC](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
Switching to week view is a simple as adding a single line of code to the view:
ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,
It goes here:
@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
BackendUrl = Url.Content("~/Home/Backend"),
ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,
EventMoveHandling = DayPilot.Web.Mvc.Events.Calendar.EventMoveHandlingType.CallBack,
EventResizeHandling = DayPilot.Web.Mvc.Events.Calendar.EventResizeHandlingType.CallBack,
TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Calendar.TimeRangeSelectedHandlingType.JavaScript,
TimeRangeSelectedJavaScript =
"dpc.timeRangeSelectedCallBack(start, end, null, { name: prompt('New Event Name:', 'New Event') });"
})
Other supported ViewType
modes are WorkWeek
and Days
(custom number of days, set using Days
property).
Month View (New in 1.3)
![Monthly AJAX Event Calendar for ASP.NET MVC](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
See also the Monthly Event Calendar tutorial:
See Also
History
- January 30, 2017 - DayPilot Lite for ASP.NET MVC 1.5 SP3 available (includes support for monthly calendar event customization)
- June 28, 2016 - DayPilot Lite for ASP.NET MVC 1.5 SP2 released (includes support for event customization - HTML, background color, border color, etc.)
- January 28, 2016 - DayPilot Lite for ASP.NET MVC 1.5 SP1 released
- June 9, 2015 - DayPilot Lite for ASP.NET MVC 1.5 released, samples updated to use the new version
- April 15, 2014 - DayPilot Lite for ASP.NET MVC 1.4 released (full CSS support), all sample projects updated with 1.4
- January 31, 2014 - ASP.NET MVC 5 sample download added, DayPilot Lite for ASP.NET MVC 1.3 SP3 released
- October 24, 2013 - ASP.NET MVC 4 sample download added
- June 19, 2013 - DayPilot Lite for ASP.NET MVC 1.3 SP1 released
- March 21, 2013 - DayPilot Lite for ASP.NET MVC 1.3 released
- March 19, 2013 - DayPilot Lite for ASP.NET MVC 1.2 SP3 released
- December 11, 2012 - DayPilot Lite for ASP.NET MVC 1.2 SP2 released
- November 21, 2012 - DayPilot Lite for ASP.NET MVC 1.2 SP1 released
- October 4, 2012 - DayPilot Lite for ASP.NET MVC 1.2 - support for ASP.NET MVC4
- September 4, 2012 - DayPilot Lite for ASP.NET MVC 1.1
- July 5, 2012 - DayPilot Lite for ASP.NET MVC 1.0 SP1 Released