Using DayPilot 2 (Outlook-Like Calendar/Scheduling Control for ASP.NET)

DayPilot 3.2 SP1 Source Code (February 25, 2013)
Example Source Code - 30 Kb
Live Demo

Day view screenshot

Week view screenshot

Features

DayPilot is an Outlook-like open-source event calendar/scheduling control:

Simple and clean look.
Views:

Customizable fonts and colors.
Clicking an event can run one of the following:
- a custom JavaScript action
- a server-side event (using PostBack)
Clicking a free-time slot can run one of the following
- a custom JavaScript action
- a server-side event (using PostBack)
Flexible data binding:

Supports ViewState.
Supports both 12-hour (3 PM) and 24-hour (15:00) time format for hour names.
Visual Studio 2005 design-time support.
Browsers:

Internet Explorer 5/5.5/6/7/8/9
Firefox 2+
Safari
Opera
Chrome

Supports concurrent events.
Supports events that end another day.
Support for business hours. Supported modes:

All day always visible.
Only business hours visible.
Business hours extended to show all events.

Getting started

The only required step to make DayPilot working is to bind it to a data source. It supports DataTable (and DataSet) as a data source so you can easily supply the data from your database.

Let's have a following table:

ID	Name	Start	End
1	Lunch	2012-06-01 12:00:00	2012-06-01 12:30:00
2	Dinner	2012-06-01 19:00:00	2012-06-01 21:00:00
3	Sleep	2012-06-01 22:00:00	2012-06-02 07:00:00
4	Breakfest	2012-06-02 07:30:00	2012-06-02 08:30:00

In order to show the events in DayPilot calendar you have to do the following steps:

Place the DayPilot control on a WebForm.
Set the DataSource property.
Set column name properties.
Select the days that will be shown.
Call DataBind().

Setting the DataSource property

After loading a DataTable from a database (or other source) you should assign it to the DayPilotCalendar.DataSource property:

DayPilotCalendar1.DataSource = MyDataTable;

In our example we are building the DataTable by hand:

DataTable dt;
dt= new DataTable();
dt.Columns.Add("start", typeof(DateTime));
dt.Columns.Add("end", typeof(DateTime));
dt.Columns.Add("name", typeof(string));
dt.Columns.Add("id", typeof(string));
    
DataRow dr;

dr = dt.NewRow();
dr["id"] = 0;
dr["start"] = Convert.ToDateTime("15:30").AddDays(1);
dr["end"] = Convert.ToDateTime("16:30").AddDays(1);
dr["name"] = "Partner conf. call";
dt.Rows.Add(dr);

// ...

return dt;

When loading the events from a database I recommend limiting the SELECT so only the necessary events are loaded (not all events from the table). DayPilot will work properly in both cases (it only select the relevant events) but all the events will have to be loaded and they will be stored in the ViewState.

Setting column name properties

You need to indicate which columns contain the necessary data:

DayPilotCalendar1.DataStartField = "Start";
DayPilotCalendar1.DataEndField = "End";
DayPilotCalendar1.DataTextField = "Name";
DayPilotCalendar1.DataValueField = "ID";

Setting the visible dates

Let's say we want to show just a single day:

DayPilotCalendar1.StartDate = Convert.ToDateTime("1 June 2012"); 
DayPilotCalendar1.Days = 1; // default (not necessary)

But we can show multiple days as well. This is a new feature of DayPilot 2.0.

DayPilotCalendar1.StartDate = Convert.ToDateTime("1 June 2012"); 
DayPilotCalendar1.Days = 5;

Example:

Data binding

Bind the data in the Page_Load() method:

if (!IsPostBack)
    DataBind();

Data-related properties overview

Here are the data-related properties of DayPilotCalendar:

Property	Description	Type	Default value
DataSource	Source of event data.	DataSource or DataTable	null
DataStartField	Name of the data source column that contains the event start date and time.	string	null
DataEndField	Name of the data source column that contains the event end date and time.	string	null
DataTextField	Name of the data source column that contains the event name.	string	null
DataValueField	Name of the data source column that contains the event ID. The Id will be passed to the event handling code when clicking on the event.	string	null
StartDate	The first date that should be shown by the calendar.	DateTime	DateTime.Today
Days	The number of days that should be rendered.	integer	1

Integration with System.Web.UI.WebControls.Calendar

For switching the date you can use the standard .NET Framework control System.Web.UI.WebControls.Calendar. You can use the PostBack event to change the DayPilot StartDate and EndDate.

In our sample we will use the DayRender event to improve the calendar:

the days will become links to a specific day (i.e. no PostBack)
the days that contain an event will be bold

private void Calendar1_DayRender(object sender, System.Web.UI.WebControls.DayRenderEventArgs e)
{
    string fontWeight = "normal";
    if (isThereEvent(e.Day.Date))
        fontWeight = "bold";

    string color = "black";
    if (e.Day.IsOtherMonth)
        color = this.Calendar1.OtherMonthDayStyle.ForeColor.Name;

    e.Cell.Text = String.Format("<a href="/KB/aspnet/Default.aspx"?day={0:d}' style='color: " 
        + color + ";text-decoration:none; font-weight:" 
        + fontWeight + "'>{1}</a>", e.Day.Date, e.Day.Date.Day);        
}

The method isThereEvent() returns true if a specific day contains any event. This method will be specific to your application. You can go through the data returned from the database (and supplied to DayPilotCalendar.DataSource) to avoid another database request. We are not using the database in our sample so it is hard-coded:

private bool isThereEvent(DateTime date)
{
    DateTime today = DateTime.Now;
    DateTime tomorrow = today.AddDays(1);
    DateTime anotherDay = today.AddDays(3);

    // there are events today
    if ((date.DayOfYear == today.DayOfYear) && (date.Year == today.Year))
        return true;

    // there are events tomorrow
    if ((date.DayOfYear == tomorrow.DayOfYear) && (date.Year == tomorrow.Year))
        return true;

    // there are events on another day
    if ((date.DayOfYear == anotherDay.DayOfYear) && (date.Year == anotherDay.Year))
        return true;

    return false;
}

Integration using UpdatePanel

Since version 2.3 DayPilot can be used inside UpdatePanel (ASP.NET AJAX Extensions/.NET Framework 3.5). If you place both the Calendar (System.Web.UI.WebControls.Calendar) and DayPilotCalendar inside the same UpdatePanel you can switch the date using Calendar.SelectionChanged event handler. It can be used like a regular PostBack event:

    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        DayPilotCalendar1.StartDate = Calendar1.SelectedDate;
        DayPilotCalendar1.DataBind();
    }

Changing the appearance

There are many options to change the default appearance:

Property	Description	Type	Default value
CellHeight	Cell height in pixels. Minimum is 15.	int	20
HourWidth	Width of the hour name in pixels.	int	40
BusinessBeginsHour	Hour when the business hours start.	int	9
BusinessEndsHour	Hour when the business hours end.	int	18
HeightSpec	Determines the visible hour range (all or business hours).	HeightSpecEnum	BusinessHoursNoScroll
ShowHours	Determines whether the hour names column should be visible.	bool	true
TimeFormat	The time format - 12-hours cycle (3 PM) or 24-hours cycle (15:00).	TimeFormat	Clock24Hours
Width	Width of the control. Can be in pixels or in percent (like <table> width attribute).	string	"100%"

Appearance examples

Default appearance

24 hours

2 days, 12-hours time format

Working week

Handling user actions

There are two types of user actions:

clicking a free time (you will typically use this action to create a new event)
clicking an event (you will typically use this action to show event details)

The actions can be handled on the client (by custom JavaScript code) or on the server (by handling the server event).

Property	Description	Type	Default value
EventClickHandling	Handling of a click on a calendar event (Disabled, JavaScript, or PostBack).	EventClickHandlingEnum	Disabled
TimeRangeSelectedHandling	Handling of a click on a free-time slot (Disabled, JavaScript, or PostBack) .	TimeRangeSelectedHandling	Disabled
EventClickJavaScript	JavaScript code that should be executed when the user clicks on a calendar event (provided that EventClickHandling is set to JavaScript). The string "{0}" will be replaced with an event ID.	string	"alert('{0}');"
TimeRangeSelectedJavaScript	JavaScript code that should be executed when the user clicks on a free-time slot (provided that FreetimeClickHandling is set to JavaScript). The string "{0}" will be replaced with the date and time specified in the standard format produced by DateTime.ToString("s") - e.g. "2006-05-15T07:00:00".	string	"alert('{0}');"

Server-side event handling

Event	Description
EventClick	Occurs when the user clicks on an event and EventClickHandling property is set to PostBack.
TimeRangeSelected	Occurs when the user clicks on an event and TimeRangeSelectedHandling property is set to PostBack.

Your server-side event handling methods will get the important data:

EventClick knows the primary key (PK column)

private void DayPilotCalendar1_EventClick(object sender, EventClickEventArgs e)
{
    Label1.Text = "Selected event: " + e.Value;
}

FreeTimeClick knows the time clicked

private void DayPilotCalendar1_TimeRangeSelected(object sender, TimeRangeSelectedEventArgs e)
{
    Label1.Text = "Selected time: " + e.Start;
}

Resources

DayPilot Lite Home
DayPilot Lite Tutorial
DayPilot Lite Demo
DayPilot Forums
How to upgrade from DayPilot Lite 3.0 to DayPilot Lite 3.1 (API changes)
Project Management for ASP.NET (open-source application sample based on DayPilot)
Open-Source Gantt Chart for ASP.NET (Gantt diagram using DayPilot)

History

December 28, 2006 - DayPilot 2.1 SP3 released
February 4, 2007 - New user forums online
March 19, 2007 - Feature list updated
April 22, 2007 - DayPilot Lite 2.2 released
May 2, 2007 - Links updated to DayPilot Lite 2.2
July 9, 2007 - DayPilot Lite 2.3 released
September 10, 2007 - Data-related properties overview and usage fixed (according to DayPilot Lite 2.3)
December 14, 2007 - Week view screenshot link fixed, UpdatePanel integration section added
May 15, 2008 - Screenshot links fixed
March 4, 2009 - Link to DayPilot Lite 3.0 release added
June 11, 2012 - Link to DayPilot Lite 3.1 release added, API description updated
April 2, 2013 - Link to DayPilot Lite 3.2 release added