JavaScript

For event data object structure, please see DayPilot.Event.data property description.

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

Bulk Loading of Events

Direct access using events.list.

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

Loading Event from a JSON Endpoint

You can use the events.load() shortcut method to load event data from a specified URL.

dp.events.load("/api/events");

The calendar component will automatically add the start and end of the current view to the URL as query string parameters ("start" and "end").

As soon as the AJAX call returns the result, the calendar will display the new data set.

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]
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

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:

Property Required Column type Column purpose
DataStartField Yes DateTime Event start date & time.
DataEndField Yes DateTime Event end date & time.
DataIdField Yes string Event primary key (id).
DataTextField Yes string Event name (description).
DataResourceField In Resources view string Id of the column where the event should appear (used for Resources view, ViewType="Resources").
DataTagFields No string Event 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]
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

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