Working with Data

Loading Data

Webix Scheduler expects a common URL for loading and saving events and calendars:

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

More information on routes and parameters is located in the Working with Server article.

If you do not have a backend server or require non-standard logic, you can customize the Backend service.

Data Structure

Events

Scheduler expects JSON data where each element of the array (event) contains 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
}

Calendars

id (string, number) - calendar ID;
text (string) - calendar name;
color (string) - calendar color (hex code);
active (number) - calendar status with the following valus possible:
- 0 - calendar is inactive (unchecked);
- 1 - calendar is active (checked).

JSON example

{
  text: "Personal", 
  color: "#997CEB", 
  active: 1, 
  id: "1"
}

Data Services

Scheduler has the following services for data:

1. Local Data

stores data on the client side in Data Collections
provides methods for getting and repainting events
provides methods for getting and repainting calendars

const local = $$("scheduler").getService("local");
// gets a collection of calendars
local.calendars().then(calendars => {
   // your code
});

2. Operations

provides methods for adding/removing/updating events and calendars

const ops = $$("scheduler").getService("operations");
ops.addCalendar(data); // adds calendar

3. Backend

provides methods for issuing requests to the backend to fetch data and save the changes back

const back = $$("scheduler").getService("backend");
back.events().then(data => console.log(data));

Study the models folder in the source code for method signatures.

Data Operations

Getting events

All events are stored in a DataCollection. To access the collection, call 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.

// getting a collection of events
$$("scheduler").getService("local").events()
  .then(events => {
    // your code
  });

You can get an array of all events by serializing the collection:

const local = $$("scheduler").getService("local");
local.events().then(events => {
  const evs = events.serialize(); // get an array of events
  /*[
      {
        calendar: 2,
        color: "#91E4A6",
        details: " Leipzig, GER",
        end_date: new Date(),
        id: "1",
        start_date: new Date(),
        text: " Zentralstadion - Leipzig"
      },
      // other events
    ]
  */
 
});

Getting events of a certain date interval

To access events of a certain date interval call 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 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()
  .then(calendars => {
    // your code
  });

You can get an array of all calendars by serializing the collection:

const local = $$("scheduler").getService("local");
local.calendars().then(calendars => {
  const cals = calendars.serialize(); // get an array of calendars
  /*
    [
      {text: "Personal", color: "#997CEB", active: 1, id: "1"},
      // other calendars
    ]
  */
});