Working with Data

Scheduler is a backend-oriented component that expects data loaded by the URL:

view: "scheduler", url: "remote/data",

Data Structure

Scheduler expects JSON data where array elements (objects) contain the following fields:

start_date (string) - start date of the event;
end_date (string) - end date of the event;
id (string, number) - ID of the event;
text (string) - name of the event (text displayed on the calendar grid);
details (string) - details of the event;
color (string) - HEX color code of the event;
calendar (number) - ID of the calendar the event belongs to (if an event does not belong to any of the existing calendars this field is not included);
all_day (number) - defines whether the event should last all day long. This field is not included if the event should not last the whole day;
recurring (string) - iCal format. You can read more about recurrence rule here;
origin_id (string, number) - (optional) the ID of the original recurring event that is assigned to a subevent after you edit certain occurrence(s).

JSON example

{
  "start_date": "2018-06-21 00:00:00",
  "end_date": "2018-07-05 00:00:00",
  "id": 17,
  "all_day": 1,
  "text": "Wimbledon",
  "details": "Wimbledon\nJune 21, 2014 - July 5, 2014",
  "color": "#CF89D5",
  "recurring": "FREQ=YEARLY;BYMONTH=1;BYMONTHDAY=1",
  "calendar": 2
}

Jet Services

Scheduler has the following services services for data:

Local - works with the client data
Operations - synchronizes the backend data with the client data
Backend - works with the backend server

If you do not have a backend server or require custom logic, you can override the Backend service.

Data Operations

Getting events

All the events are stored in a DataCollection. The collection is accessible via the events() method of the Local service. The method takes 2 parameters:

sync (boolean) - if true, we assume that the events are loaded into the collection that can be accessed without a promise;
force (boolean) - if true, the collection will reload its data from the backend.

const events = $$("scheduler").getService("local").events();

The method returns a promise that resolves with a collection of the events:

events.then(events => {/* your code */})

Once loaded, the data are stored in a collection and you can always access it in the synchronous mode.

But if you're not sure whether the collection is loaded, you can request files asynchronously by passing true as the second parameter. Data will be loaded in process:

Additionally, you can serialize the data collection to access the data elements themselves:

// getting a collection of events
events(true, true).then(events => {
    // getting an array of events
    events.serialize(); 
});

The resulting array with objects looks like the following:

[
  {
    calendar: 2,
    color: "#91E4A6",
    details: " Leipzig, GER",
    end_date: new Date(),
    id: "1",
    start_date: new Date(),
    text: " Zentralstadion - Leipzig"
  },
  // other objects
]

Getting events of a certain date interval

To access events of a certain date interval use the getEvents() method of the Local service. The method takes 2 parameters:

start (object) - start date of the interval
end (object) - end date of the interval

let start = webix.Date.monthStart(new Date(2018, 4, 21));
let end = webix.Date.add(start, 1, "month", true);
 
const events = $$("scheduler").getService("local").getEvents(start, end);

The method returns a promise that resolves with an array of events between specified dates (inclusive):

[
  {
    calendar: 1,
    color: "#CF89D5",
    details: " Milan, Italy",
    end_date: new Date(),
    id: "16",
    start_date: new Date(),
    text: " Comunale Giuseppe Meazza - San Siro",
  },
  // other events objects from the interval
]

Getting calendars

To access a collection of all the calendars, call the calendars method of the Local service. The method takes 2 parameters:

sync (boolean) - if true, we assume that the calendars are loaded into the collection that can be accessed without a promise;
force (boolean) - if true, data will be reloaded from the backend.

// getting a collection of calendars
$$("scheduler").getService("local").calendars(true, true)
  .then(calendars => {
    // getting an array of calendars
    calendars.serialize(); 
  });

The method returns a promise that resolves with a collection of the existing calendars:

Array of calendars

[
  {text: "Personal", color: "#997CEB", active: 1, id: "1"},
  {text: "Public", color: "#01C2A5", active: 1, id: "2"},
  {text: "Birthdays", color: "#D2FB9E", active: 1, id: "3"},
  {text: "Holidays", color: "#F68896", active: 1, id: "4"}
]