Customizing Scheduler

Scheduler is a complex widget created with Webix Jet, the MV* framework for Webix Library.

Jet App Nature

Scheduler is built as a Jet app. Each Jet app is created as a class that extends the JetApp class.
Read more about JetApp:

The interface of Scheduler is split in parts. Each part is a module (class) that extends the JetView class.
Read more about JetView:

Jet Views in Scheduler

You can go to this page to see the list of all Jet views and where they are in the interface.

Advantages of Jet-based Approach

  • you can customize any part of Scheduler without the need to change the source
  • you can reuse any module (a view or a service) of Scheduler in your apps
  • customization is simple due to OOP
  • customization allows you to keep the UI and the logic of components together

Code for IE11 and Edge must be with different syntax.

How to Make Changes to Views

You need to create you own view class and inherit it from one of the default views or from scheduler.views.JetView:

class CustomHours extends scheduler.views["modes/common/hourscale"] {
    /* your logic that will override or extend the default one */
}

There are two JetView methods that you can safely override to customize views:

  • config() for changes in the UI,
  • init() for changes in the UI and behavior.
class CustomHours extends scheduler.views["modes/common/hourscale"] {
  config() {
    const ui = super.config();
    ui.type.height = 60;
    return ui;
  }
}

You can also add and call your own methods.

After you are done with a custom class, replace the default view with the new one:

webix.ui({
  view: "scheduler",
  url: "https://docs.webix.com/calendar-backend/",
  mode: "week",
  override: new Map([
    [scheduler.views["modes/common/hourscale"], CustomHours],
  ]),
});

Defining Custom Behavior

You can change the behavior of a view by adding methods to view classes. Follow these steps:

  1. Create a view class.
  2. Define the method.
  3. Call it.
class CustomHours extends scheduler.views["modes/common/hourscale"] {
  // custom method
  ParseHours() {
      const data = [];
      for (let h = 0; h < 24; h++) {
          if (h > 7 && h < 22) data.push({ id: h + "" });
      }
      this.List.parse(data);
  }
}

Related sample:  Scheduler: Custom View

Back to top