ASP.NET WebForms

1. Data Source

You can also assign data source directly using DataSource property (in the code only):

DayPilotCalendar1.DataSource = MyDataSource;

The data source must implement IListSource, IEnumerable, or IDataSource interface. Examples:

  • XmlDataSource
  • SqlDataSource
  • ArrayList
  • DataTable
  • DataSet (first DataTable will be loaded)

After loading a DataTable from a database (or other source) you should assign it to the DataSource property:

DayPilotCalendar1.DataSource = GetData(DayPilotCalendar1);

GetData() loads the data from a database:

public DataTable GetAssignments(DayPilotCalendar calendar)
{
  DataTable dt = new DataTable();
  SqlDataAdapter da = new SqlDataAdapter("SELECT * FROM [event] WHERE NOT (([end] <= @start) OR ([start] >= @end))", ConfigurationManager.ConnectionStrings["daypilot"].ConnectionString);
  da.SelectCommand.Parameters.AddWithValue("start", calendar.StartDate);
  da.SelectCommand.Parameters.AddWithValue("end", calendar.EndDate.AddDays(1));
  da.Fill(dt);
  return dt;
}

Sample table [event]

[id][name][start][end]
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

DataSourceID

Another option is to use a DataSource control (such as SqlDataSource) to load the data. Assign the control ID to DataSourceID property in the designer (ASPX template):

<DayPilot:DayPilotCalendar 
    ID="DayPilotCalendar1" 
    runat="server" 
    DataSourceID="SqlDataSource1"     
    DataTextField="name" 
    DataValueField="id" 
    DataStartField="start" 
    DataEndField="end"  >
</DayPilot:DayPilotCalendar>

2. Mapping the Fields/Properties

You need to specify which columns/fields/properties of the data source will be used:

PropertyRequiredColumn typeColumn purpose
DataStartFieldYesDateTimeEvent start date & time.
DataEndFieldYesDateTimeEvent end date & time.
DataIdFieldYesstringEvent primary key (id).
DataTextFieldYesstringEvent name (description).
DataResourceFieldIn Resources viewstringId of the column where the event should appear (used for Resources view, ViewType="Resources").
DataTagFieldsNostringEvent custom data (use it to pass additional information to event handlers). Comma separated list.

The column content will be converted to DateTime/string using Convert.ToDateTime()/Convert.ToString().

3. Data Binding

To load the data from the data source you need to call DataBind() method:

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
      DataBind();
  }
}

In the event handler (when handling either PostBack or CallBack) you need to call DataBind() again if you have changed the data (e.g., after modifying the event duration in EventResize handler). If you use CallBack handling rather than PostBack, you need to call Update() method to send the changes back to the control:

protected void DayPilotCalendar1_EventResize(object sender, EventResizeEventArgs e)
{
         
    // Update your data source here
    // ...
 

    DayPilotCalendar1.DataBind();
    DayPilotCalendar1.Update(); // necessary for handling CallBack, but won't hurt for PostBack
}

By default the event data are stored in the ViewState. It doesn't store the complete data source:

  • It selects only the values defined in DataValueField, DataTextField, DataResourceField, DataStartField, DataEndField columns from the data source.
  • It selects only the events that are within the time range specified by StartDate and Days properties.

4. Using DataTagFields

Define the data source fields that you want to pass with the event in DataTagFields, e.g. DataTagFields="eventtype, background".

There are three places where you can access the information from the tag fields:

  1. BeforeEventRender event handler (access it as e.Tag["eventtype"] here and use it to draw custom icons in the event, custom background colors, etc.)
  2. Event-related events on the client side, e.g. in EventClickJavaScript (as e.tag("eventtype")).
  3. Event-related events on the server side, e.g. in EventClick event handler (as e.Tag["eventtype"]).

ASP.NET MVC

1. Load the data

Sample table [event]

[id][name][start][end]
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

Load the event data and assign the result to Events property:

public class Dpc : DayPilotCalendar
{
  protected override void OnInit(InitArgs initArgs)
  {
    Events = new EventManager().FilteredData(StartDate, StartDate.AddDays(Days)).AsEnumerable();
    // ...
  }
}

This is a sample EventManager class:

public class EventManager
{
  public DataTable FilteredData(DateTime start, DateTime end)
  {
    SqlDataAdapter da = new SqlDataAdapter("SELECT * FROM [event] WHERE NOT (([eventend] <= @start) OR ([eventstart] >= @end))", ConfigurationManager.ConnectionStrings["daypilot"].ConnectionString);
    da.SelectCommand.Parameters.AddWithValue("start", start);
    da.SelectCommand.Parameters.AddWithValue("end", end);

    DataTable dt = new DataTable();
    da.Fill(dt);

    return dt;
  }
}

2. Map the Columns/Fields

public class Dpc : DayPilotCalendar
{
  protected override void OnInit(InitArgs initArgs)
  {
    Events = new EventManager().FilteredData(StartDate, StartDate.AddDays(Days)).AsEnumerable();

DataStartField = "start";
DataEndField = "end";
DataTextField = "name";
DataIdField = "id";
DataResourceField = "resource"; // ...
} }

3. Update()

The OnInit() is invoked using a CallBack and it is necessary to ask the scheduler to redraw the event. You can do this by calling Update() or UpdateWithMessage(). 

public class Dpc : DayPilotCalendar
{
     protected override void OnInit(InitArgs initArgs)
     {
         Events = new EventManager().FilteredData(StartDate, StartDate.AddDays(Days)).AsEnumerable();

DataStartField = "start";
DataEndField = "end";
DataTextField = "name";
DataIdField = "id";
                         UpdateWithMessage("Welcome!"); } }

Tutorial

JavaScript

Adding an Event to the Event Calendar

var e = new DayPilot.Event({
  start: new DayPilot.Date("2013-03-25T00:00:00"),
  end: new DayPilot.Date("2013-03-27T00:00:00"),
  id: DayPilot.guid(),
text: "Event"
});

dp.events.add(e);

Event Bulk Loading

dp.events.list = [
{
  start: "2013-03-25T00:00:00",
  end: "2013-03-27T00:00:00",
  id: "1",
  text: "Event 1"
},
{
  start: "2013-03-26T12:00:00",
  end: "2013-03-27T00:00:00",
  id: "2",
  text: "Event 2"
}
];
dp.update();