DayPilot.Month.events.load

The events.load() method loads events from a given URL using an AJAX call. The URL must return a JSON array with events that follow the DayPilot.Event.data structure.

Declaration

DayPilot.Month.events.load(url[, success[, error]]);

Parameters

• url (string) - the URL

• success (function) - success callback

• error (function) - error callback

Notes

The HTTP call uses GET by default. The calendar adds start and end parameters that specify the visible start and end to the query string.

You can use DayPilot.Month.eventsLoadMethod to switch to POST.

The POST request sends the following parameters as a JSON object (since version 8.1):

• start - visible start

• end - visible end

Example POST body:

{"start": "2022-05-30T00:00:00", "end": "2022-07-04T00:00:00"}

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

Success Callback

function success(args) {}

The success callback is executed only if the data is received successfully and parsed as a JSON array. It runs after the response is received but before the calendar is updated. Call args.preventDefault() to cancel the automatic update.

Arguments:

• args.preventDefault() - cancels the automatic update

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

Error Callback

function error(args) {}

The error callback is executed for HTTP responses other than 200 and 304, or when there is an exception during JSON parsing.

Arguments:

• args.exception (object) - JSON data parsing exception

• args.request (XmlHttpRequest) - the request object used for the AJAX call

Example

Minimal call:

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

With callbacks:

This example loads events from /getEvents. The current date range is passed in the start and end query string parameters.

const success = (args) => {
  dp.message("Events loaded");
};

const error = (args) => {
  dp.message("Loading failed.");
};

dp.events.load("/getEvents", success, error);

Sample data returned from /getEvents:

[
  {
    "id": 1,
    "start": "2022-01-01T09:00:00",
    "end": "2022-01-01T13:00:00",
    "text": "Event 1",
    "cssClass": "my-event"
  },
  {
    "id": 2,
    "start": "2022-01-02T09:00:00",
    "end": "2022-01-02T13:00:00",
    "text": "Event 2"
  }
]

See Also

DayPilot.Event.data

DayPilot.Calendar.eventsLoadMethod

HTML5 Monthly Calendar and ASP.NET Core [code.daypilot.org]

DayPilot.Month Class