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
Transparent CSS Theme
Green CSS Theme
White CSS Theme
Traditional CSS Theme
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:
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>
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).
The "events" table has a very simple structure:
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:
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)
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)
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)
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