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:

IDNameStartEnd
1Lunch2006-06-01 12:00:002006-06-01 12:30:00
2Dinner2006-06-01 19:00:002006-06-01 21:00:00
3Sleep2006-06-01 22:00:002006-06-02 07:00:00
4Breakfast2006-06-02 07:30:002006-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:

10-daypilot-dataproperties.gif

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:

week-height30-250.gif

Data binding

Bind the data in the Page_Load() method:

if (!IsPostBack)
	DataBind();

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java