DayPilot.Scheduler.events.load

DayPilot.Scheduler.events.load(url, success, error);

This method loads events from a given URL using an AJAX call (GET or POST, depending on eventsLoadMethod value). The URL must return a JSON array with events (see DayPilot.Event.data for the event data structure).

For GET requests, the Scheduler will add start and end of the current view as query string parameters. Example:

/getEvents?start=2018-06-15T09:00:00&end=2018-06-15T13:00:00

POST requests will contain the start and end parameters as a JSON object in the request body (since version 8.1):

Example POST body:

{"start": "2018-06-15T09:00:00", "end": "2018-06-15T13:00:00"}

The Scheduler is updated automatically after a successful AJAX call. You can cancel the client-side refresh by calling args.preventDefault() in the success callback function.

Parameters

• url (string)
• success (function) - success callback
• error (function) - error callback

Success Callback

function success(args) {}

The success callback is only executed if the data is successfully received from the URL and it can be parsed as a JSON array.

Arguments:

• args.preventDefault()
• args.data (array) - event data received from the server

Error CallBack

function error(args) {}

The error callback is executed when the HTTP return code is other than 200 or 304 or if there is an exception during parsing the JSON data.

Arguments:

• args.exception (object) - JSON data parsing exception
• args.request (XmlHttpRequest) - the request object used for the AJAX call

Examples

Minimal example

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

Example with event handlers

This example will load events from "/getEvents" URL. The current date range is passed in "start" and "end" POST parameters.

dp.events.load(
  "/getEvents",
  function success(args) {
    dp.message("Events loaded");
  },
  function error(args) {
    dp.message("Loading failed.");
  }
);

Sample data returned from /getEvents:

[
{
  id: 1
  start: "2018-01-01T09:00:00",
  end: "2018-01-01T13:00:00",
  text: "Event 1",
  resource: "A",
  cssClass: "my-event",
  resizeDisabled: true
},
{
  id: 2
  start: "2018-01-02T09:00:00",
  end: "2018-01-02T13:00:00",
  resource: "B",
  text: "Event 2"
}
]