Click here to Skip to main content
Click here to Skip to main content

DayPilot - Building an Outlook-Like Calendar Component for ASP.NET

By , 26 Jan 2014
Rate this:
Please Sign up or sign in to vote.

ASP.NET MVC Version 

Sep 21, 2013 - See also the follow-up articles:  

These articles introduce a new DayPilot version for ASP.NET MVC which supports drag&drop AJAX operations (event moving, resizing, and creating).  

Building an Outlook-Like Calendar Component for ASP.NET 

The story is simple and you might have already heard it: I needed a component and because I wasn't able to find a good one I decided to write it. I was thinking like this: It would take me two hours to find it, another two hours to understand it and another two hours to customize it. Six hours. In six hours, I should be able to write a simple component by myself. 


  • Reusable ASP.NET component for showing the events in day/week/work week views.
  • HTML5 support 
  • Full CSS-based styling.
  • Supports all modern browsers (Chrome, Firefox, Internet Explorer, Safari, Opera, mobile browsers).  
  • Visual Studio 2010/2012/2013 (also works with 2005 and 2008) 
  • Azure support 
  • Internationalization support (automatic date and time formatting, 12/24 clock support). 
  • Accepts data in many forms, including a DataTable, List, and other collections of custom objects.
  • Support for database backends (Microsoft SQL Server, MySQL, etc.) 
  • Simple mapping of data object fields (DataStartField, DataEndField, DataIdField, DataTextField). 
  • User-defined JavaScript/server-side action for clicking the event.
  • User-defined JavaScript/server-side action for clicking the free time.
  • Support for business hours - doesn't show the time outside the working hours unless there is an event.
  • Support for events started before or finish after the current day.
  • Support for overlapping events (two or more events for a particular moment). 
  • Commercial-friendly open-source license (Apache Software License 2.0) 

Algorithm for Arranging Concurrent Events 

The following mechanism is used to arrange the events: 

  • "Event" class will keep the basic information about the event, like starting and ending time, title, etc.
  • "Day" class will keep all the events for a certain day. It will be able to load the events from a DataTable. Each day can contain zero or more Blocks.
  • "Block" class will contain events that overlap with one another. Each Block contains one or more Columns.
  • "Column" class will contain all the events inside a Block that can be in a single Column.

Let's demonstrate it visually: 

The algorithm can be described in the following steps: 

  1. Shorten all the Events so that they don't overlap to another day (e.g. if something starts yesterday, let's make it start today at 00:00).
  2. Extend the Events' duration to 30 minutes blocks (we would have problems showing a duration of 5 minutes, 5 seconds - it wouldn't be possible to write any text into a rectangle of such a small height).
  3. Find Blocks:
    • Order all the events by the starting time (primary) and by the ending time in reverse (secondary) - longer events go closer to the left.
    • Iterate through the events - if it overlaps with the previous add it to the current Block; otherwise create a new Block.
  4. Arrange Events into Columns inside a Block (do this for each Block):
    • Find a moment with the most overlaps and count the overlaps. Create that many numbers of Columns.
    • Arrange Events into Columns - find the first free Column from the left and place it there.

Now, we can calculate the position of each Event because we know the Blocks and Columns:

  • Left: (the column number)/(total count of columns for the owner block) in percent.
  • Width: 1/(total count of columns) in percent
  • Top: (starting time)*(hour height)
  • Height: (duration)*(hour height)

Quick-Start Example

ASP.NET Control Declaration (.aspx) 

<DayPilot:DayPilotCalendar ID="DayPilotCalendar1" runat="server" 

Loading data (.aspx.cs)

protected void Page_Load(object sender, EventArgs e)
  if (!IsPostBack)
      DayPilotCalendar1.StartDate = firstDayOfWeek(DateTime.Now, DayOfWeek.Sunday);
      DayPilotCalendar1.DataSource = getData();

 See the DayPilot Tutorial for more details. 

Scheduler (3.0)  

DayPilot Lite 3.0 supports Scheduler ASP.NET control that allows you to display a scheduler for multiple resources side-by-side.  

See also:

Gantt Chart (3.2)  

DayPilot Lite 3.2 supports Gantt Chart ASP.NET control (displaying one task per line). 

See also: 

CSS Theme Styling (4.0) 

DayPilot Lite 4.0 supports full calendar and scheduler CSS styling.

You can design your own CSS theme in the online theme designer:

NuGet Package

DayPilot Lite is also available as a NuGet package:



This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0

About the Author

Dan Letecky

Czech Republic Czech Republic
My open-source event calendar/scheduling AJAX controls:
DayPilot for JavaScript/HTML5/jQuery
DayPilot for ASP.NET
DayPilot for MVC
DayPilot for Java

Comments and Discussions

GeneralGreat PinmemberUsman59925-Jun-12 7:51 
GeneralRe: Great PinmemberDan Letecky26-Jun-12 4:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140415.2 | Last Updated 26 Jan 2014
Article Copyright 2005 by Dan Letecky
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid