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.
Scheduler expects JSON data where each element of the array (event) contains the following fields:
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",
"section": "2",
"units": "1,2",
"details": "Wimbledon\nJune 21, 2014 - July 5, 2014",
"color": "#CF89D5",
"recurring": "FREQ=YEARLY;BYMONTH=1;BYMONTHDAY=1",
"calendar": 2
}
JSON example
{
text: "Personal",
color: "#997CEB",
active: 1,
id: "1"
}
Units are loaded when Scheduler is switched to the units mode.
Sections are loaded when Scheduler is switched to the timeline mode.
JSON example
{
id: "1"
text: "Section 1",
}
Scheduler has the following services for data:
1. Local Data
const local = $$("scheduler").getService("local");
// gets a collection of calendars
local.calendars().then(calendars => {
// your code
});
2. Operations
const ops = $$("scheduler").getService("operations");
ops.addCalendar(data); // adds calendar
3. Backend
const back = $$("scheduler").getService("backend");
back.events().then(data => console.log(data));
Study the models folder in the source code for method signatures.
All events are stored in a DataCollection. To access the collection, call the events method of the Local service. The method takes 2 parameters:
// 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",
section: "2",
units: "2",
start_date: new Date(),
text: " Zentralstadion - Leipzig"
},
// other events
]
*/
});
To access events of a certain date interval call the getEvents method of the Local service. The method takes 2 parameters:
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",
section: "1",
units: "2",
start_date: new Date(),
text: " Comunale Giuseppe Meazza - San Siro",
},
// other events objects from the interval
]
To access a collection of calendars, call the calendars method of the Local service. The method takes 2 parameters:
// 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
]
*/
});
The collection is available only if the timeline property is enabled.
To access a collection of sections, call the sections method of the Local service. The method takes 2 parameters:
// getting a collection of sections
$$("scheduler").getService("local").sections()
.then(sections => {
// your code
});
You can get an array of all sections by serializing the collection:
const local = $$("scheduler").getService("local");
local.sections().then(sections => {
const sectionsArray = sections.serialize(); // get an array of sections
/*
[
{text: "Section 1", id: "1"},
// other sections
]
*/
});
The collection is available only if the units property is enabled.
To access a collection of units, call the units method of the Local service. The method takes 2 parameters:
// getting a collection of units
$$("scheduler").getService("local").units()
.then(units => {
// your code
});
You can get an array of all units by serializing the collection:
const local = $$("scheduler").getService("local");
local.units().then(units => {
const unitsArray = units.serialize(); // get an array of units
/*
[
{value: "Sports", id: "1"},
// other units
]
*/
});
You can call clearAll to clear all inner collections of the Scheduler (events. calendars, etc.).
$$("$scheduler").clearAll();
To reload data after clearAll, refresh the app instance of the Scheduler. Refresh will call the common sequence of data loading (methods of Local and Backend services).
$$("$scheduler").$app.refresh();
Related sample: Scheduler: Data Operations
Back to top