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:
recurring (string) - iCal format. Scheduler supports the following options:
1) daily (FREQ=DAYLY)
"FREQ=DAYLY" // daily
"FREQ=DAYLY;INTERVAL=3" // every three days
2) weekly (FREQ=WEEKLY)
"FREQ=WEEKLY;BYDAY=TU" // every week on Tuesday
"FREQ=WEEKLY;INTERVAL=2;BYDAY=TU,FR" // every two weeks on Tuesdays and Fridays
3) monthly (FREQ=MONTHLY)
"FREQ=MONTHLY;INTERVAL=2;BYDAY=MO;BYSETPOS=3"
// every two months on the third Monday
"FREQ=MONTHLY;BYMONTHDAY=25" // every month on the 25th day
4) yearly (FREQ=YEARLY)
"FREQ=YEARLY;INTERVAL=5;BYDAY=TH;BYSETPOS=2;BYMONTH=7"
// every five years on the second Thursday of July
"FREQ=YEARLY;INTERVAL=3;BYMONTH=12;BYMONTHDAY=31"
// every three years on December 31st
"FREQ=YEARLY;INTERVAL=4;BYYEARDAY=100"
// every four years on the 100th day of the year
5) hourly, minutely, secondly (FREQ=HOURLY, FREQ=MINUTELY, FREQ=SECONDLY)
"FREQ=HOURLY;INTERVAL=1" // every hour
"FREQ=MINUTELY;INTERVAL=5" // every 5 minutes
"FREQ=SECONDLY;INTERVAL=300" // every 300 seconds
These options are also available via the UI.
Note that currently the minimal interval supported in the UI is limited to 5 minutes/300 seconds.
While the hourly is one of the standard recurring options:
the minutely and secondly recurring options are used for setting custom recurring patterns:
You can create events that repeat endlessly or limit the number of times they repeat. To set the number of repetitions, use COUNT:
"FREQ=DAYLY;INTERVAL=2;COUNT=7" // every two days for seven occurrences
To set the end date, use UNTIL:
"FREQ=MONTHLY;INTERVAL=1;UNTIL=20210928T000000Z;BYMONTHDAY=28"
// every month on the 28th day until September 28, 2021
If nothing is set, the event will repeat forever.
Learn more about the recurrence rule in the iCalendar documentation.
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",
"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