Click here to Skip to main content
15,860,859 members
Articles / Web Development / HTML

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

Rate me:
Please Sign up or sign in to vote.
4.83/5 (64 votes)
30 Mar 2015Apache7 min read 366K   4.2K   286   49
Showing the features of a flexible ASP.NET event calendar/scheduling control.

Event Calendar Day View

AJAX Event Calendar Day View

Event Calendar Week View

HTML5 Event Calendar Week View

ASP.NET Scheduler

Image 3DayPilot includes a Scheduler control that allows you to display events for multiple resources.

ASP.NET Gantt

Image 4DayPilot includes a Gantt control that displays one task per row on a horizontal time axis.

Event Calendar Features 

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

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 load the events from your database.

Let's have a following table:

ID  Name  Start  End
Lunch 2014-06-01 12:00:00  2014-06-01 12:30:00
Dinner 2014-06-01 19:00:00  2014-06-01 21:00:00 
Sleep 2014-06-01 22:00:00  2014-06-02 07:00:00
4 Breakfast  2014-06-02 07:30:00 2014-06-02 08:30:00

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

  1. Place the DayPilot control on a WebForm.
  2. Set the DataSource property.
  3. Set column name properties.
  4. Select the days that will be shown.
  5. 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:

C#
DayPilotCalendar1.DataSource = MyDataTable;

In our example we are building the DataTable by hand:

C#
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:

C#
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:

C#
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.

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

Example:

HTML5 Event Calendar Work Week View

Data binding 

Bind the data in the Page_Load() method:

C#
if (!IsPostBack)
    DataBind(); 

Data-Related Calendar Properties Overview

Here are the data-related properties of DayPilotCalendar:

DataSource
Source of event data  (DataSource or DataTable).

DataStartField
Name of the data source column that contains the event start date and time (string). 

DataEndField  
Name of the data source column that contains the event end date and time (string).  

DataTextField
Name of the data source column that contains the event name (string).

DataValueField
The Id will be passed to the event handling code when clicking on the event (string). 

StartDate
The first date that should be shown by the calendar (DateTime, the default value is DateTime.Today). 

Days
The number of days that should be rendered (int, the default value is 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.

Image 6

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
C#
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='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:

C#
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:

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

Event Calendar Appearance

There are many options to change the default appearance: 

CellHeight
Cell height in pixels (int, the default value is 20). Minimum height is 15. 

HourWidth
Width of the hour name in pixels (int, the default value is 40). 

BusinessBeginsHour
Hour when the business hours start (int, the default value is 9). 

BusinessEndsHour
Hour when the business hours end (int, the default value is 18). 

HeightSpec
Determines the visible hour range (HeightSpecEnum, the default value is BusinessHoursNoScroll). 

ShowHours
Determines whether the hour names column should be visible (bool, the default value is true). 

TimeFormat
The time format - 12-hours cycle (3 PM) or 24-hours cycle (15:00). 

Width
Width of the control (string, the default value is "100%"). 

Calendar CSS Theme Examples 

You can create your own CSS theme using the online theme designer [themes.daypilot.org]. 

Green CSS Theme 

Image 7

White CSS Theme 

Image 8

Transparent CSS Theme 

Image 9

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

EventClickHandling 
Handling of a mouse click on a calendar event (Disabled, JavaScript, or PostBack).  

TimeRangeSelectedHandling 
Handling of a mouse click on a free-time slot  (Disabled, JavaScript, or PostBack).   

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. 

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. "2014-05-15T07:00:00". 

Server-side event handling 

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 Example 

The id of the event can be read using e.Value. 

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

FreeTimeClick Example 

The start of the clicked time cell can be read using e.Start. 

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

Resources

DayPilot for JavaScript

DayPilot has a special client-side only version that can be used with any kind of backend (PHP, Ruby, Node.js):

DayPilot for ASP.NET MVC

DayPilot has a special version that includes ASP.NET MVC bindings (server-side):

History

License

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


Written By
Czech Republic Czech Republic
My open-source event calendar/scheduling web UI components:

DayPilot for JavaScript, Angular, React and Vue

Comments and Discussions

 
QuestionGreat Article! Pin
SAMManjula12-Apr-15 12:54
SAMManjula12-Apr-15 12:54 
GeneralMy vote of 5 Pin
adriancs2-Jun-14 21:00
mvaadriancs2-Jun-14 21:00 
GeneralRe: My vote of 5 Pin
Dan Letecky3-Jun-14 4:46
Dan Letecky3-Jun-14 4:46 
QuestionHow to use isThereEvent with database sql Pin
Member 1017997230-Jul-13 6:53
Member 1017997230-Jul-13 6:53 
QuestionWhy my daypilot calendar will disappear when I enter an event Pin
Member 1012321628-Jun-13 19:37
Member 1012321628-Jun-13 19:37 
AnswerRe: Why my daypilot calendar will disappear when I enter an event Pin
Dan Letecky30-Jun-13 23:20
Dan Letecky30-Jun-13 23:20 
GeneralMy vote of 5 Pin
Savalia Manoj M21-Jan-13 22:19
Savalia Manoj M21-Jan-13 22:19 
GeneralRe: My vote of 5 Pin
Dan Letecky2-Apr-13 4:21
Dan Letecky2-Apr-13 4:21 
GeneralMy vote of 5 Pin
AmitGajjar11-Jun-12 20:10
professionalAmitGajjar11-Jun-12 20:10 
GeneralRe: My vote of 5 Pin
Dan Letecky11-Jun-12 21:47
Dan Letecky11-Jun-12 21:47 
GeneralMy vote of 5 Pin
santosh poojari11-Jun-12 17:15
santosh poojari11-Jun-12 17:15 
GeneralRe: My vote of 5 Pin
Dan Letecky11-Jun-12 21:47
Dan Letecky11-Jun-12 21:47 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey16-Feb-12 0:43
professionalManoj Kumar Choubey16-Feb-12 0:43 
GeneralRe: My vote of 5 Pin
Dan Letecky11-Jun-12 21:47
Dan Letecky11-Jun-12 21:47 
NewsMessage Closed Pin
30-May-09 16:40
Gilad Khen30-May-09 16:40 
GeneralRe: Source code available online Pin
adriancs2-Jun-14 21:02
mvaadriancs2-Jun-14 21:02 
GeneralEnable a Specific cell as a Free Time and Disable other cells who are not Pin
Hassan Akhtar Ali16-Nov-08 19:41
Hassan Akhtar Ali16-Nov-08 19:41 
GeneralAwesome Pin
merlin98119-May-08 11:49
professionalmerlin98119-May-08 11:49 
QuestionEvent spanning on more than a day ? Pin
faber756-Jun-07 3:43
faber756-Jun-07 3:43 
AnswerRe: Event spanning on more than a day ? Pin
Dan Letecky6-Jun-07 3:56
Dan Letecky6-Jun-07 3:56 
QuestionJust reviewed the daypilot Pin
ambshah4-May-07 3:32
ambshah4-May-07 3:32 
AnswerRe: Just reviewed the daypilot Pin
Dan Letecky11-May-07 4:21
Dan Letecky11-May-07 4:21 
QuestionDates on X Axis and Tasks on Y Axis Pin
rk3320-Jan-07 9:12
rk3320-Jan-07 9:12 
AnswerRe: Dates on X Axis and Tasks on Y Axis Pin
Dan Letecky19-Mar-07 3:08
Dan Letecky19-Mar-07 3:08 
GeneralRe: Dates on X Axis and Tasks on Y Axis Pin
Dan Letecky7-Aug-07 21:34
Dan Letecky7-Aug-07 21:34 

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

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