Click here to Skip to main content
11,412,526 members (71,447 online)
Click here to Skip to main content

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

, 15 Mar 2015 Apache
Rate this:
Please Sign up or sign in to vote.
A good-looking ASP.NET control that shows events visually arranged in a day calendar. Includes design-time support and data binding.

Version 5.0

March 16, 2015: DayPilot Lite for ASP.NET WebForms 5.0 [daypilot.org] now supports calendar drag and drop:

  • event moving
  • event resizing
  • time range selecting

Source and binary available for download [daypilot.org].

ASP.NET MVC Version

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).

HTML5/JavaScript Version

DayPilot Lite is also available for HTML5/JavaScript:

The latest release includes AngularJS event calendar [code.daypilot.org] plugin.

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.

Features

  • 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" 
        DataTextField="name" 
        DataIdField="id" 
        TimeFormat="Clock12Hours" 
        DataStartField="Start" 
        DataEndField="End" 
        Days="7" 
        NonBusinessHours="Hide" 
        onbeforeeventrender="DayPilotCalendar1_BeforeEventRender"
        EventClickHandling="JavaScript"
        TimeRangeSelectedHandling="JavaScript"
        
        CssOnly="true"
        CssClassPrefix="calendar_transparent"
        >
        </DayPilot:DayPilotCalendar> 

Loading data (.aspx.cs)

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

More information about event loading [doc.daypilot.org].

See also the DayPilot Tutorial for a step-by-step setup guide.

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:

Built-In CSS Theme (4.1)

DayPilot Lite 4.1 includes a built-in CSS theme. The CssOnly mode (full calendar CSS styling mode) is now enabled by default. The calendar default CSS theme can be displayed without any external dependencies.

NuGet Package

DayPilot Lite is also available as a NuGet package:

History

License

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

Share

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

 
Questionchange Calendar type (Jalali) Pin
MB Seifollahi at 2-Jun-14 20:52
professionalMB Seifollahi2-Jun-14 20:52 
BugTypo in History Pin
Jani Giannoudis at 15-May-14 10:24
memberJani Giannoudis15-May-14 10:24 
GeneralRe: Typo in History Pin
Dan Letecky at 15-May-14 11:08
memberDan Letecky15-May-14 11:08 
QuestionLicense Question Pin
sandeegk77 at 9-Aug-13 7:26
membersandeegk779-Aug-13 7:26 
AnswerRe: License Question Pin
Dan Letecky at 11-Aug-13 23:29
memberDan Letecky11-Aug-13 23:29 
GeneralMy vote of 5 Pin
Member 4469234 at 29-Apr-13 10:45
memberMember 446923429-Apr-13 10:45 
GeneralRe: My vote of 5 Pin
Dan Letecky at 29-Apr-13 21:15
memberDan Letecky29-Apr-13 21:15 
Question404 to download page Pin
ASUS3000 at 26-Apr-13 6:06
memberASUS300026-Apr-13 6:06 
AnswerRe: 404 to download page Pin
Dan Letecky at 26-Apr-13 6:15
memberDan Letecky26-Apr-13 6:15 
GeneralMy vote of 5 Pin
Jerry OLoughlin at 11-Mar-13 7:34
memberJerry OLoughlin11-Mar-13 7:34 
GeneralRe: My vote of 5 Pin
Dan Letecky at 11-Mar-13 22:22
memberDan Letecky11-Mar-13 22:22 
Questionquestion Pin
kiquenet.com at 11-Mar-13 2:46
memberkiquenet.com11-Mar-13 2:46 
AnswerRe: question Pin
Dan Letecky at 14-Mar-13 11:29
memberDan Letecky14-Mar-13 11:29 
GeneralGreat Pin
Usman599 at 25-Jun-12 8:51
memberUsman59925-Jun-12 8:51 
GeneralRe: Great Pin
Dan Letecky at 26-Jun-12 5:34
memberDan Letecky26-Jun-12 5:34 
GeneralI have some question of your daypilot [modified] Pin
gavin_116 at 29-Aug-10 16:54
membergavin_11629-Aug-10 16:54 
how to get detial information of the event ex: get the event start time and the event end time?
version : open source

modified on Sunday, August 29, 2010 10:08 PM

QuestionIntegrate With Real Time Exchange Server Pin
Clemie at 6-May-08 3:12
memberClemie6-May-08 3:12 
AnswerRe: Integrate With Real Time Exchange Server Pin
Dan Letecky at 13-May-08 4:36
memberDan Letecky13-May-08 4:36 
GeneralLicense question Pin
arcb at 17-Jan-08 21:08
memberarcb17-Jan-08 21:08 
AnswerRe: License question Pin
Dan Letecky at 18-Jan-08 10:02
memberDan Letecky18-Jan-08 10:02 
GeneralFor Windows Forms Pin
can kayacan at 28-Sep-07 0:53
membercan kayacan28-Sep-07 0:53 
GeneralRe: For Windows Forms Pin
Dan Letecky at 28-Sep-07 6:56
memberDan Letecky28-Sep-07 6:56 
GeneralExtracting Pin
ClaudeX at 7-Jun-07 0:40
memberClaudeX7-Jun-07 0:40 
GeneralRe: Extracting Pin
Dan Letecky at 8-Jun-07 22:56
memberDan Letecky8-Jun-07 22:56 
Questionfree? Pin
KhinLLK at 25-Apr-07 0:47
memberKhinLLK25-Apr-07 0:47 
AnswerRe: free? Pin
Dan Letecky at 25-Apr-07 3:08
memberDan Letecky25-Apr-07 3:08 
GeneralLicense question Pin
PhilBaker at 31-Jan-07 4:43
memberPhilBaker31-Jan-07 4:43 
GeneralRe: License question Pin
Dan Letecky at 31-Jan-07 22:46
memberDan Letecky31-Jan-07 22:46 
GeneralEvent FreeTimeClick Pin
Roseville at 5-Jan-07 14:32
memberRoseville5-Jan-07 14:32 
QuestionIs it possible to call Java Script Funtion Pin
Roseville at 5-Jan-07 12:42
memberRoseville5-Jan-07 12:42 
Generaloverlapswith Pin
TommieKokkie at 18-Dec-06 11:44
memberTommieKokkie18-Dec-06 11:44 
GeneralRe: overlapswith Pin
Dan Letecky at 18-Dec-06 12:56
memberDan Letecky18-Dec-06 12:56 
QuestionloadEventsToDay Pin
TommieKokkie at 8-Dec-06 2:34
memberTommieKokkie8-Dec-06 2:34 
AnswerRe: loadEventsToDay Pin
Dan Letecky at 10-Dec-06 22:58
memberDan Letecky10-Dec-06 22:58 
QuestionRefreshing DayPilot Control Pin
EnriqueSu at 17-Oct-06 6:21
memberEnriqueSu17-Oct-06 6:21 
QuestionData binding &amp; integration with webcontrols.calendar [modified] Pin
EnriqueSu at 15-Sep-06 14:46
memberEnriqueSu15-Sep-06 14:46 
AnswerRe: Data binding &amp; integration with webcontrols.calendar Pin
Dan Letecky at 2-Oct-06 21:58
memberDan Letecky2-Oct-06 21:58 
QuestionHow about and "Enabled" style/property? Pin
Spotnick at 13-Sep-06 4:47
memberSpotnick13-Sep-06 4:47 
GeneralDayPilot 2.0.1 released Pin
Dan Letecky at 23-Jun-06 4:00
memberDan Letecky23-Jun-06 4:00 
Questionediting Pin
eighteenpinkpandas at 12-Jun-06 4:18
membereighteenpinkpandas12-Jun-06 4:18 
Generalappearance Pin
r.waymen at 11-Jun-06 22:56
memberr.waymen11-Jun-06 22:56 
GeneralRe: appearance Pin
Dan Letecky at 11-Jun-06 23:07
memberDan Letecky11-Jun-06 23:07 
QuestionRe: appearance Pin
r.waymen at 12-Jun-06 0:25
memberr.waymen12-Jun-06 0:25 
AnswerRe: appearance Pin
Dan Letecky at 12-Jun-06 1:48
memberDan Letecky12-Jun-06 1:48 
AnswerRe: appearance Pin
Dan Letecky at 12-Jun-06 7:08
memberDan Letecky12-Jun-06 7:08 
GeneralDayPilot 2.0 released Pin
Dan Letecky at 9-Jun-06 13:55
memberDan Letecky9-Jun-06 13:55 
GeneralEvents Renderer function in a wrong way Pin
Keynan_d at 24-May-06 19:39
memberKeynan_d24-May-06 19:39 
GeneralRe: Events Renderer function in a wrong way Pin
Dan Letecky at 9-Jun-06 13:53
memberDan Letecky9-Jun-06 13:53 
GeneralDayPilot 2.0 Beta 1 released Pin
Dan Letecky at 14-May-06 5:11
memberDan Letecky14-May-06 5:11 
QuestionParsing error Pin
Willem_Le_Roux at 4-May-06 23:54
memberWillem_Le_Roux4-May-06 23:54 

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 | Terms of Use | Mobile
Web03 | 2.8.150427.1 | Last Updated 16 Mar 2015
Article Copyright 2005 by Dan Letecky
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid