DayPilot for ASP.NET - AJAX Calendar/Scheduling Controls
Try the online demo: AJAX-style event creating, moving, resizing, and deleting • Context menu • Day view • Work week view • Week view • Month view • Horizontal/vertical resources view • PostBack/AJAX/JavaScript event handling • Binding to XmlDataSource, SqlDataSource, DataTable, ArrayList • Custom event formatting • UpdatePanel compatibility

2. Data Binding

The only required step to make DayPilot working is to bind it to a data source. You can either set DataSource property directly or use DataSourceID.

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";

You can also set these properties in the visual designer:

Setting the visible dates

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

DayPilotCalendar1.StartDate = Convert.ToDateTime("1 June 2006"); 

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();

 

DayPilot Pro is an advanced DayPilot edition. You can check a thumbnail overview of the most interesting features. There is also an online demo with all the features working (including the AJAX features). If you want to test the design-time support and API you can download a fully functional trial version. And if you like it, you can buy a full version with source code and 12 months of upgrades and support (with a 30-days money back guarantee).

DayPilot Lite is a do-it-yourself open-source edition of DayPilot. Although it misses some DayPilot Pro features, there are thousands of developers using it to build calendar, personal scheduling, and resource booking applications.