This sample project shows how to build an AJAX Event Calendar (Scheduler) using the open-source DayPilot Lite
for ASP.NET MVC library (Apache Software License 2.0). We will build our sample with ASP.NET MVC 3, Visual Studio 2010, and SQL Server Express 2005.
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 3 Razor view and add DayPilot
Calendar widget using Html.DayPilotCalendar extension.
- Controller: Create a MVC 3 controller that will supply
the data.
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 3 View (8 Lines of Code)
Create a new MVC 3 view (Views/Home/Index.cshtml):
@{ ViewBag.Title = "MVC 3 Razor Event Calendar"; }
<h2>MVC 3 Razor Event Calendar</h2>
Add DayPilot JavaScript libraries:
<script src="@Url.Content("~/Scripts/DayPilot/common.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/DayPilot/calendar.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 = "MVC 3 Razor Event Calendar"; }
<h2>MVC 3 Razor Event Calendar</h2>
<script src="@Url.Content("~/Scripts/DayPilot/common.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/DayPilot/calendar.js")" type="text/javascript"></script>
@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
BackendUrl = Url.Content("~/Home/Backend"),
})
3. MVC 3 Controller (34 Lines of Code)
Create a new MVC 3 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:
The table fields (id, text, eventstart, eventend) are mapped to the required
DayPilotCalendar fields using Data*Field properties:
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 DayPilotCalendarMvc3.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&drop functionality (event creating, moving, and
resizing) we need to add the following lines to the view (4 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 DayPilotCalendarMvc3.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
See also the Monthly Event Calendar tutorial:
See Also
History
Submit an article or tip
Post your Blog
News 
Suggestion 
Bug 
Joke 
Rant 
Admin 
