Widgets Samples Demos Forum Services
Documentation
StartUI Complex WidgetsScheduler

Working with Server

Loading Data

Scheduler widget expects a backend server to fetch events and calendars. You can provide a link to it by the url setting:

webix.ui({
    view: "scheduler",
    url:"http://localhost:3200/"
});

Scheduler will load and save data using the following URLs:

  • events (e.g. http://localhost:3200/events) - get and save events
  • calendars (e.g. http://localhost:3200/calendars) - get and save calendars
  • sections (e.g. http://localhost:3200/sections) - get sections
  • units (e.g. http://localhost:3200/units) - get units.

Sample backend for Scheduler is available for downloading.

If you do not have a backend server, you can customize the methods of the Backend service and provide client-side data as a promise.

Backend Service

Backend service is a server-side model that contains methods for sending requests. They are called by the Operations service when data needs to be loaded or saved.

Check out the full list of methods below.

How to customize backend model

To change data requests, get and process the responses you can:

  • create your own backend service by extending the default one;
  • define and override the needed methods;
  • use custom backend service instead of the default one by including it into the override map. 
class MyBackend extends scheduler.services.Backend {
    // define and override methods here
}
 
webix.ui({
    view: "scheduler",
    url:"http://localhost:3200/",
    override: new Map([[scheduler.services.Backend, MyBackend]]),
});

Changing calls to server

You can send AJAX requests to your server by using the needed URLs, e.g.:

Adding an event 

class MyBackend extends scheduler.services.Backend {
  addEvent(event) {
    return webix.ajax.post("//localhost:3200/events", event)
      .then(res => res.json());
  }
}

Parsing client-side data

If you need to fill Scheduler with client-side data, you can return it as a promise inside the following methods:

Client-side data 

class MyBackend extends scheduler.services.Backend {
    events() {
        return webix.promise.resolve(events);
    }
    calendars() {
        return webix.promise.resolve(calendars);
    }
  }

Related sample:  Scheduler: Local Data

See the required format of the incoming data.

Backend Service Methods

Below you can find descriptions of the following methods:

url(path)

Is used by other methods for preparing URLs for server requests.

Parameters:

  • path (string) - a relative path.

Returns: the full path.

events([params])

Is called upon widget initialization.

Parameters:

  • params (object) - optional. Data object with start and end dates; pass this parameter if you want to get events for a specific date period (e.g. for dynamic loading): 
{
  from: "2018-05-21 00:00:00",
  to: "2018-05-22 00:00:00"
}

Returns: a promise that resolves with an array of events (all or for a specified date period).

Request:

GET http://localhost:3000/events
 
// dynamic loading
GET http://localhost:3000/events?from=2020-10-01%2000%3A00%3A00&to=2020-11-01%2000%3A00%3A00

Response:

The server returns an array with events data objects:

[
  {"start_date":"2018-06-08 17:00:00","end_date":"2018-06-08 20:00:00",
  "text":" Zentralstadion - Leipzig ","details":" Leipzig, GER ",
  "color":"#91E4A6","calendar":2,"id":"1"},
 
  {"recurring":"FREQ=WEEKLY;BYDAY=MO","text":"Meeting",
  "start_date":"2018-05-21 20:00:00","end_date":"2018-05-21 21:00:00",
  "all_day":"0","calendar":1,"color":"#D2FB9E",
  "details":"Starbucks","id":"ftwMT7mkIZPJIMmO", section: "1", units: "3"},
 
  // other events
]

addEvent(obj)

Adds a new event to the server.

Parameters:

  • obj (object) - event data.

Returns: a promise that resolves with an object containing ID of the new event.

Request:

POST http://localhost:3000/events
Form Data
recurring: FREQ=YEARLY;BYMONTH=1;BYMONTHDAY=1
text: Meeting
start_date: 2018-05-21 20:00:00
end_date: 2018-05-21 21:00:00
all_day: 0
calendar: 1
color: #997CEB
details: Meeting with Dave at Starbucks
sections: 1
units: 3

You can read more about the recurring string rules in the iCal specification.

Response:

The server returns an object containing ID of the new event.

{id: "mY7VoF4uLsxHaJqf"}

updateEvent(id, obj, mode [, date])

Updating a specified event.

Parameters:

  • id (string, number) - event ID;
  • obj (object) - new data;
  • mode (string) - the name of the mode in which the event will be updated:
    • "this" - pass this if you want to update the occurrence on this date;
    • "all" (a signal to remove all subevents). Pass all if you want to update all occurrences;
    • "next" (a signal to remove all old subevents after this date). Pass next if you want to update occurrences starting from a certain date;
  • date (Date) - optional. The date used for updating in "next" mode (also only for recurring events).

Returns: a promise.

Request:

PUT http://localhost:3000/events/mY7VoF4uLsxHaJqf
Form Data
// non-recurring
"start_date":"2020-10-10 11:35:00","end_date":"2020-10-10 14:35:00"
"mode": "all"
 
// for recurring
"recurring":"FREQ=DAILY;INTERVAL=1;UNTIL=20201009T000000Z"
"recurring_update_date": some date
"recurring_update_mode": "next"
"mode": next
"date": 2020-10-09 00:00:00

You can read more about the recurring string rules in the iCal specification.

removeEvent(id)

Removes a specified event.

Parameters:

  • id (string, number) - event ID.

Returns: a promise.

Request:

DELETE http://localhost:3000/events/mY7VoF4uLsxHaJqf

sections()

Is called when Scheduler is switched to the Timeline mode.

Returns: a promise that resolves with an array of all sections.

Request:

GET http://localhost:3000/sections

Response:

The server returns an array of the sections data objects.

[
  {"text":"Section 1","id":"1"},
  {"text":"Section 2","id":"2"},
  // other sections
]

units()

Is called when Scheduler is switched to the Units mode.

Returns: a promise that resolves with an array of all units.

Request:

GET http://localhost:3000/units

Response:

The server returns an array of the units data objects.

[
   {"id":"1"," value":"Sports"},
   {"id":"2", "value":"Social activities"},
   {"id":"3","value":"Celebrations"}
]

calendars()

Is called upon widget initialization.

Returns: a promise that resolves with an array of all calendars (event groups).

Request:

GET http://localhost:3000/calendars

Response:

The server returns an array of the calendars data objects.

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

addCalendar(obj)

Adds a new calendar to the server.

Parameters:

  • obj (object) - calendar data.

Returns: a promise that resolves with an object containing ID of the new calendar.

Request:

POST http://localhost:3000/calendars
Form Data
text: (no title)
color: #997CEB
active: 1

Response:

The server returns an object containing the ID of the new calendar.

{id: "nNQcTUFtOCZQXP2F"}

updateCalendar(id, obj)

Updates a specified calendar.

Parameters:

  • id (string, number) - calendar ID;
  • obj (object) - new data.

Returns: a promise.

Request:

PUT http://localhost:3000/calendars/nNQcTUFtOCZQXP2F
Form Data
id: nNQcTUFtOCZQXP2F
text: Legends
color: #F7CC34
active: 1

removeCalendar(id)

Removes a specified calendar.

Parameters:

  • id (string, number) - calendar ID.

Returns: a promise.

Request:

DELETE http://localhost:3000/calendars/nNQcTUFtOCZQXP2F
Back to top
© XB Software Ltd
2013-2024