units

allows displaying day events grouped by categories

Example

webix.ui({
    view: "scheduler",
    url: "https://docs.webix.com/calendar-backend/",
    units: true });

Default value:

false

Related samples

If set to true the property allows switching Scheduler to the Units mode. In this mode users can look through the events grouped by certain categories (units). Events can belong to one or multiple units.

To assign an event to any unit, you need to

• load units from backend
• include unit ID/IDs to the event data

Initializing and switching the Units mode

It is a static setting, so if you want to switch it dynamically, you will have to rerender the app:

webix.ui({
    view: "scheduler",
    id: "scheduler1"
});
 
$$("scheduler1").config.units = true;
$$("scheduler1").$app.refresh();

To open the units mode initially, set the units property to true and the mode property to "units":

webix.ui({
    view: "scheduler",
    url: "https://docs.webix.com/calendar-backend/",
    units: true,     mode:"units", });

If you want to change the current mode later, refer to the state mode property (provided the units property is initially enabled). The changes will be applied immediately.

$$("scheduler1").getState().mode = "units";

Setting the units width

By default, the minimal width of a unit is 300px. If the width of a unit reaches 300px (due to resizing or if there are too many units), the horizontal scroll appears.

To set a different minimal width for a unit, you need to modify the app.config.units.minWidth property, as follows:

webix.ui({
    view: "scheduler",
    url: "https://docs.webix.com/calendar-backend/",
    units: { minWidth: 120 }, });

You can also turn it off by setting the property value to 0.

Back to top