JavaScript

JavaScript Example (adding a single event)

See also:

This method can be called before .init() or after .init(). Since build 8.1.1916 the UI update is postponed - this means multiple events.add() calls (even after .init()) will cause just one UI update.

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(),
  resource: "A",
  text: "Event"
});

dp.events.add(e);

JavaScript Example (bulk loading)

See also:

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

Loading Events from a JSON URL

You can use DayPilot.Scheduler.events.load() method to load events from a JSON endpoint.

<div id="dp"></div>
      
<script type="text/javascript">
  
  var dp = new DayPilot.Scheduler("dp");

  dp.startDate = "2014-01-01";
  dp.days = 365;
  dp.scale = "Day";
  dp.timeHeaders = [
      { groupBy: "Month", format: "MMM yyyy" },
      { groupBy: "Cell", format: "ddd d" }
  ];
  dp.init();
  
  dp.events.load("/getEvents?start=" + dp.startDate + "&end=" + dp.startDate.addDays(dp.days));
  dp.rows.load("/getResources");
  

</script>

ASP.NET WebForms

Load the data in the code behind using DataSource or DataSourceID properties.

Let's have a following table:

Table [event]

[id][name][start][end][resource]
1Lunch2006-06-01 12:00:002006-06-01 12:30:005
2Dinner2006-06-01 19:00:002006-06-01 21:00:005
3Sleep2006-06-01 22:00:002006-06-02 07:00:005
4Breakfast2006-06-02 07:30:002006-06-02 08:30:005

In order to show the events in the Scheduler you have to do the following steps:

  1. Set the DataSource property
  2. Map the column names.
  3. Call DataBind().

1. DataSource

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

DayPilotScheduler1.DataSource = GetData(DayPilotScheduler1);

GetData() loads the data from a database:

public DataTable GetAssignments(DayPilotScheduler 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;
}

When loading the events from a database remember to limit the SELECT so only the necessary events are loaded.

See also

2. Map the Columns/Fields

You need to indicate which columns contain the necessary data:

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

You can also set these properties in the visual designer:

10-daypilot-dataproperties.gif

3. DataBind()

Bind the data in the Page_Load() method:

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
    DayPilotScheduler1.DataSource = GetData(DayPilotScheduler1);

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

    DayPilotScheduler1.DataBind();
  }
}

4. Custom Event Data (Tags)

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

Table [event]

[id][name][start][end][resource]
1Lunch2006-06-01 12:00:002006-06-01 12:30:005
2Dinner2006-06-01 19:00:002006-06-01 21:00:005
3Sleep2006-06-01 22:00:002006-06-02 07:00:005
4Breakfast2006-06-02 07:30:002006-06-02 08:30:005

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

public class Dps : DayPilotScheduler
{
  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 Dps : DayPilotScheduler
{
  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 Dps : DayPilotScheduler
{
     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";
                         UpdateWithMessage("Welcome!"); } }

4. Custom Event Data (Tags)

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. OnBeforeEventRender 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 OnEventClick event handler (as e.Tag["eventtype"]).