Configuring Scheduler

As far as Scheduler is a complex widget, it consists of many stand-alone Webix views with their own APIs. You can redefine inner views and work with the specific Scheduler settings.

Basic Configuration

You can use the following settings to provide the basic config of the widget:

• date (object) - initial date to display (current date by default)
• mode (string) - currently active mode/tab. Possible values are:
  • "day"
  • "week"
  • "month" (default)
  • "year"
  • "agenda"
  • "timeline" (available if timeline is switched on)
  • "units" (available if units are switched on).
• readonly (boolean) - if true, disables calendar and event editing. false by default
• calendars (boolean) - if false, disables the ability to add events to calendars (event groups). true by default
• units (boolean) - allows displaying day events grouped by categories
• timeline (boolean) - allows working with the Timeline view
• timelineMode (string) - sets mode for the Timeline view ("day", "week" by default, "month")
• recurring (boolean) - if false, does not support recurring events. true by default
• dynamic (string) - enables dynamic loading of events during navigation ("day", "week", "month", "year"). Does not depend on the current display mode described above, if set to one of the enumerated values. Can also be set to true. In this case dynamic loading depends on the specified mode and the visible dates
• serverUTC (boolean) - if true, allows parsing incoming dates as UTC to a local time zone and saving back to UTC
• compact (boolean) - compact mode. Not set (undefined) by default
• compactWidth (number) - width of the widget, when it is switched to a compact mode automatically (compact must not be false). 780 by default
• url (string) - the URL for loading data
• locale (string, object) - name of the language in use or an object with language settings
• override - a Map of modified inner classes and services used for customization.

Reactive Configuration

In addition, Scheduler has specific reactive properties that store global app state and let developers track its changes:

• active (array) - an array with IDs of active calendars
• date (object) - JavaScript Date object
• mode (string) - current display mode
• readonly (boolean) - current readonly state (true or false)
• selected (object) - the event that is currently selected. Contains several fields:
  • id (string, number) - the ID of the event
  • date (string) - (for recurring events) the ID of a particular occurrence
  • node (object) - HTML node of the selected event (occurrence) if selection was made by clicking on it.

You can get the current state of the widget with the help of the getState() method:

webix.ui({
    view: "scheduler",
    date: new Date(2018, 4, 21, 0, 0, 0),
    url: "https://docs.webix.com/calendar-backend/",
});
 
$$("scheduler").getState();
 
/*
{
    active: [...], date: new Date(),
    mode: "month", readonly: false,
    selected: {id: "30", date: "1526974200000_30", node:HTMLElement }
}
*/

How to Listen to Changes of the Reactive Properties

You can use $observe handler to listen to changes and provide custom handlers for them:

webix.ui({
  view: "scheduler",
  id: "myscheduler",
  date: new Date(2018, 4, 21, 0, 0, 0),
  url: "https://docs.webix.com/calendar-backend/",
  on: {
    onInit: app => {
      const state = app.getState();
      // log mode and selected event
      state.$observe("mode", v => webix.message(`You are in the "${v}" display mode!`));
 
      state.$observe("selected", v => {
        if(v !== null) webix.message(`The ID of the selected event is ${v.id}`)
      });
    }
  }
});

Related sample:  Scheduler: Listening to State Changes

In the sample above, the current state is accessed via JetApp instance which is available in the onInit event handler.

Back to top