DayPilot.Scheduler.eventContainersMultiLineEnabled

The eventContainersMultiLineEnabled property (boolean) allows overlapping events in the same Scheduler container to occupy multiple event lines.

Available since 2026.3.7041.

Declaration

DayPilot.Scheduler.eventContainersMultiLineEnabled

Default Value

false

Notes

Events belong to the same container when their container values match and they are displayed in the same resource row. Set container on DayPilot.Event.data.
With the default value false, container members share one event line and may overlap. With true, overlapping members use separate lines; members that do not overlap can reuse a line within the container.
With automatic placement, the container reserves its full horizontal span across its occupied lines. Other events can use those lines outside the reserved span.
This property controls placement. Container outlines are controlled separately by eventContainersVisible.
Cannot be combined with DayPilot.Scheduler.groupConcurrentEvents.

Examples

JavaScript

This example assumes that the DayPilot library is loaded and a <div id="dp"></div> element is available.

const dp = new DayPilot.Scheduler("dp", {
  startDate: "2026-09-01",
  days: 1,
  scale: "Hour",
  eventContainersMultiLineEnabled: true,
  resources: [{id: "R", name: "Resource"}],
  events: [
    {
      id: 1,
      text: "Preparation",
      resource: "R",
      container: "job-1",
      start: "2026-09-01T09:00:00",
      end: "2026-09-01T11:00:00"
    },
    {
      id: 2,
      text: "Assembly",
      resource: "R",
      container: "job-1",
      start: "2026-09-01T10:00:00",
      end: "2026-09-01T12:00:00"
    }
  ]
});
dp.init();

The two overlapping events use separate lines inside the same container.

The following framework excerpts show the relevant options. Supply resources and event data as in the JavaScript example.

Angular

<daypilot-scheduler [config]="config"></daypilot-scheduler>

config: DayPilot.SchedulerConfig = {
  eventContainersMultiLineEnabled: true,
};

React

<DayPilotScheduler eventContainersMultiLineEnabled={true} />

Vue

<DayPilotScheduler :eventContainersMultiLineEnabled="true" />

Availability

Availability of this API item in DayPilot editions:

Product	Lite	Pro
DayPilot for JavaScript