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 | Breakfast | 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:
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.
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:
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:
Bind the data in the Page_Load() method:
if (!IsPostBack) DataBind();