allows working with the Timeline view

boolean timeline;


  view: "scheduler",
  url: "https://docs.webix.com/calendar-backend/",
  // add the timeline option to the list of modes
  timeline: true

Default value:


Related samples


If set to true the property allows switching Scheduler to the Timeline mode. In this mode users can look through the events grouped by sections in a horizontal timeline.

To assign an event to any section, you need to

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

  view: "scheduler",
  id: "scheduler1"
const schedApp = $$("scheduler1").$app;
schedApp.config.timeline = true;

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

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

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

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

The view has tree modes defined by the timelineMode property.

See also
Back to top