DayPilot.Scheduler.eventContainersLayer

The eventContainersLayer property ("Above" | "Below") sets whether container outlines are drawn above or below Scheduler events.

Available since 2026.3.7042.

Declaration

DayPilot.Scheduler.eventContainersLayer

Possible Values

"Above" - draws container outlines above events.
"Below" - draws container outlines below events.

Default Value

"Above"

Notes

Has a visual effect when eventContainersVisible is true. It does not change event placement or container membership.
With "Below", event backgrounds can cover the parts of a container border that coincide with event edges. Use "Above" to draw the border over those edges.
Outlines remain mouse-transparent in both layers.

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",
  eventContainersVisible: true,
  eventContainersLayer: "Below",
  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 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 = {
  eventContainersVisible: true,
  eventContainersLayer: "Below",
};

React

<DayPilotScheduler
  eventContainersVisible={true}
  eventContainersLayer="Below"
/>

Vue

<DayPilotScheduler
  :eventContainersVisible="true"
  eventContainersLayer="Below"
/>

Availability

Availability of this API item in DayPilot editions:

Product	Lite	Pro
DayPilot for JavaScript