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).
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.
- 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, Edge, Safari, Opera).
- Visual Studio 2010/2012/2013/2015
- 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).
- 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
Block" class will contain events that overlap with one another. Each
Block contains one or more
Column" class will contain all the events inside a
Block that can be in a single
Let's demonstrate it visually:
The algorithm can be described in the following steps:
- 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).
- 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).
- 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
Columns inside a
Block (do this for each
- Find a moment with the most overlaps and count the overlaps. Create that many numbers of
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
- 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)
ASP.NET Control Declaration (.aspx)
<DayPilot:DayPilotCalendar ID="DayPilotCalendar1" runat="server"
Loading data (.aspx.cs)
protected void Page_Load(object sender, EventArgs e)
DayPilotCalendar1.StartDate = firstDayOfWeek(DateTime.Now, DayOfWeek.Sunday);
DayPilotCalendar1.DataSource = getData();
More information about event loading [doc.daypilot.org].
See also the DayPilot Tutorial for a step-by-step setup guide.
DayPilot Lite 3.0 supports Scheduler ASP.NET control that allows you to display a scheduler for multiple resources side-by-side.
Gantt Chart (3.2)
DayPilot Lite 3.2 supports Gantt Chart ASP.NET control (displaying one task per line).
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.
Drag and Drop (5.0)
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].
DayPilot Lite is also available as a NuGet package:
- May 9, 2016: DayPilot Lite for ASP.NET WebForms 5.0 SP3 released
- March 16, 2015: New release (5.0) with drag and drop support
- May 15, 2014: New release (4.1), algorithm screenshot updated
- January 9, 2014: Updated screenshots, new release (4.0), quick-start example, outdated information removed (old browser hacks)
- February 28, 2013: DayPilot Lite for ASP.NET WebForms 3.2 SP1
- September 7, 2012: DayPilot Lite for ASP.NET WebForms 3.1 SP3
- August 6, 2012: DayPilot Lite for ASP.NET WebForms 3.1 SP2
- June 25, 2012: DayPilot Lite for ASP.NET WebForms 3.1, screenshot and links updated
- February 3, 2006: DayPilot 1.1 - New features: Server-side events (postback), improved support for business hours, 12-hour and 24-hour time formats.
- January 2, 2006: DayPilot 1.0.3 - Fixed: Support for HTML 4.01 Transitional and XHTML 1.0 Transitional.
- December 28, 2005: DayPilot 1.0.2 - Fixed: Design-time preview.
- December 22, 2005: DayPilot 1.0.1 - Fixed: View state problems.