Skip to main content
Email Password   helpLost your password?

Day view screenshot

Sample Image

Week view screenshot

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 supply the data from your database.

Let's have a following table:

ID Name Start End
1 Lunch 2006-06-01 12:00:00 2006-06-01 12:30:00
2 Dinner 2006-06-01 19:00:00 2006-06-01 21:00:00
3 Sleep 2006-06-01 22:00:00 2006-06-02 07:00:00
4 Breakfest 2006-06-02 07:30:00 2006-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:

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 2006"); 
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 2006"); 
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:

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:

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
HourHeight Hour height in pixels. Minimum is 30. It must be even. int 40
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
NonBusinessHours Determines whether the non-business hours should be visible (if there is no event). NonBusinessHoursBehavior NonBusinessHoursBehavior.HideIfPossible
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 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:

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. UserActionHandling UserActionHandling.JavaScript
FreetimeClickHandling Handling of a click on a free-time slot. UserActionHandling UserActionHandling.JavaScript
JavaScriptEventAction 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}');"
JavaScriptEventAction 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 UserActionHandling.PostBack.
FreeTimeClick Occurs when the user clicks on an event and FreetimeClickHandling property is set to UserActionHandling.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_FreeTimeClick(object sender, FreeClickEventArgs e)
{
    Label1.Text = "Selected time: " + e.Start;
}

Resources

History

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
NewsSource code available online Pin
Gilad Khen		17:40 30 May '09  
GeneralEnable a Specific cell as a Free Time and Disable other cells who are not Pin
Hassan Akhtar Ali		20:41 16 Nov '08  
GeneralAwesome Pin
merlin981		12:49 19 May '08  
GeneralEvent spanning on more than a day ? Pin
cardigait		4:43 6 Jun '07  
GeneralRe: Event spanning on more than a day ? Pin
Dan Letecky		4:56 6 Jun '07  
QuestionJust reviewed the daypilot Pin
ambshah		4:32 4 May '07  
AnswerRe: Just reviewed the daypilot Pin
Dan Letecky		5:21 11 May '07  
QuestionDates on X Axis and Tasks on Y Axis Pin
rk33		10:12 20 Jan '07  
AnswerRe: Dates on X Axis and Tasks on Y Axis Pin
Dan Letecky		4:08 19 Mar '07  
GeneralRe: Dates on X Axis and Tasks on Y Axis Pin
Dan Letecky		22:34 7 Aug '07  
GeneralA simple change to make free time freely available... Pin
Forogar		13:08 4 Jan '07  
GeneralRe: A simple change to make free time freely available... Pin
Dan Letecky		4:01 19 Mar '07  
QuestionEvents not showing Pin
maryg129		12:48 3 Jan '07  
AnswerRe: Events not showing Pin
Dan Letecky		4:01 19 Mar '07  
QuestionLoad event based on Date selection , Need Help Pin
Deepak_DOTNET		23:58 26 Nov '06  
QuestionLoad event based on Date selection , Need Help Pin
Deepak_DOTNET		23:58 26 Nov '06  
AnswerRe: Load event based on Date selection , Need Help Pin
langdaddy		14:32 28 Jan '07  
GeneralImplement isThereEvent Method Pin
obinna_eke		4:46 9 Oct '06  
GeneralRe: Implement isThereEvent Method Pin
Dan Letecky		4:04 19 Mar '07  
GeneralRe: Implement isThereEvent Method Pin
Dan Letecky		22:30 7 Aug '07  
GeneralInteresting.. Pin
Spotnick		9:22 4 Jul '06  
GeneralRe: Interesting.. Pin
wardeaux		7:40 20 Jul '06  
GeneralRe: Interesting.. Pin
Dan Letecky		4:07 19 Mar '07  
GeneralDayPilot 2.0.1 released Pin
Dan Letecky		4:00 23 Jun '06  
GeneralFrom Almost 1 To 5 Pin
Bassam Abdul-Baki		4:11 13 Jun '06  
Last Visit: 9:17 23 Nov '09     Last Update: 9:17 23 Nov '09 12 Next »


Last Updated 4 Mar 2009 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009