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",
"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"
}
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",
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",
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
]
*/
});
Related sample: Scheduler: Data Operations
Back to top