Working with Server

Loading Data

Scheduler is a backend-oriented component. If you do not have a backend server, you should override the methods of the Backend service and return promises of client data.

Backend Service

Backend is a server-side model. It is defined as an object and has methods for sending requests.
Check out the full list of methods.

How to Override Backend Service

How to override Backend:

  • extend it
  • use the override setting of Scheduler
class MyBackend extends scheduler.services.Backend {
    // define and override methods here
}
 
webix.ui({
    view: "scheduler",
    url: "https://docs.webix.com/calendar-backend/",
    override: new Map([[scheduler.services.Backend, MyBackend]]),
});

Calls to Backend Server

You can send AJAX requests to your backend server:

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

Working with Client Data

If you have client data, you can return it inside of a promise:

class MyBackend extends scheduler.services.Backend {
  calendars() {
    return Promise.resolve([
      {text: "Personal", color: "#997CEB", active: 1, id: "1"},
        {text: "Public", color: "#01C2A5", active: 1, id: "2"},
        {text: "Birthdays", color: "#D2FB9E", active: 1, id: "3"},
    ]);
  }
}

Backend Service methods

url(path)

url() is used by other methods for getting full URLs for server requests.

Parameters:

  • path (string) - a relative path.

Returns:

  • url (string) - the full path.

events([params])

Returns a promise that resolves with an array of events.

Parameters:

  • params (object) - (optional) data object with start and end dates and a timezone offset; 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",
  timeshift: -180
}

Returns:

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

Request info:

  • Method: GET
  • URL example:
http://localhost:3000/events
 
// dynamic loading
http://localhost:3000/events?timeshift=-180&from=2020-10-01%2000%3A00%3A00&to=2020-11-01%2000%3A00%3A00

Response from the server:

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"}
 
  // other events
]

addEvent(obj)

The method gets called upon adding a new event.

Parameters:

  • obj (object) - event data object

Returns:

  • promise (promise) - a promise that resolves with an object containing ID of the new method

Request info:

  • Method: POST
  • URL example:
http://localhost:3000/events

Response from the server:

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

{id: "mY7VoF4uLsxHaJqf"}

Form Data example:

recurring: 
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:

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

The method gets called upon updating the specified event.

Parameters:

  • id (string, number) - ID of the event
  • obj (object) - object with new data
  • mode (string) - the name of the mode in which the event will be updated; for recurring events: "unite" (a signal to remove all subevents), "next" (a signal to remove all occurrences and subevents after a certain date); for non-recurring and updates of single subevents "common"
  • date (Date) - (optional) the date used for updating in "next" mode (also only for recurring events)

Returns:

The method returns a promise.

Request info:

  • Method: PUT
  • URL example:
http://localhost:3000/events/mY7VoF4uLsxHaJqf

Contains the URL segment and the ID of the event being updated.

Form Data example:

// non-recurring
"start_date":"2020-10-10 11:35:00","end_date":"2020-10-10 14:35:00"
"mode": "common"
 
// 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

removeEvent(id)

The method get called upon deleting the specified event.

Parameters:

  • id (string, number) - the ID of the event being removed

Returns:

The method returns a promise.

Request info:

  • Method: DELETE
  • URL example:
http://localhost:3000/events/mY7VoF4uLsxHaJqf

Contains the URL segment and the ID of the event being removed.

calendars()

The method returns all the calendars available.

Returns:

  • promise - a promise that resolves with an array of all calendars (event groups).

Request info:

  • Method: GET
  • URL example:
http://localhost:3000/calendars

Response from the server:

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"}
]

addCalendar(obj)

The method gets called upon adding a new calendar.

Parameters:

  • obj (object) - calendar data object

Returns:

  • promise (promise) - a promise that resolves with an object containing ID of the new calendar

Request info:

  • Method: POST
  • URL example:
http://localhost:3000/calendars

Contains the URL segment.

Response from the server:

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

{id: "nNQcTUFtOCZQXP2F"}

Form Data example:

text: (no title)
color: #997CEB
active: 1

updateCalendar(id, obj)

The method gets called upon updating the specified calendar.

Parameters:

  • id (string, number) - the ID of the calendar
  • obj (object) - an object with new data

Returns:

The method returns a promise.

Request info:

  • Method: PUT
  • URL example:
http://localhost:3000/calendars/nNQcTUFtOCZQXP2F

Contains the URL segment and the ID of the calendar being updated.

Form Data example:

id: nNQcTUFtOCZQXP2F
text: Legends
color: #F7CC34
active: 1

removeCalendar(id)

The method get called upon deleting the specified calendar.

Parameters:

  • id (string, number) - the ID of the calendar being removed

Returns:

The method returns a promise.

Request info:

  • Method: DELETE
  • URL example:
http://localhost:3000/calendars/nNQcTUFtOCZQXP2F

Contains the URL segment and the ID of the calendar being removed.

Back to top