timeline

allows working with the Timeline view

Example

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

Default value:

false

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

• load sections from backend
• include section ID to the event data

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

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

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

webix.ui({
  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.

Back to top