Event Containers

Event containers keep related events together within a JavaScript Scheduler row. Assign the same container ID to each event in the group.

Without a container, events use the first available line. Event sorting controls their placement order:

By default, events in the same container share one vertical position. The Scheduler reserves the container's time span, from the earliest start to the latest end, when placing other events:

Create an Event Container

This example keeps preparation and assembly on the same line. Set container on the event data; no separate container object is required.

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

A container groups events within one row. Reusing its ID in another resource row does not join the two groups.

Allow Overlapping Events on Separate Lines

Set eventContainersMultiLineEnabled to true to let overlapping members use separate lines inside their container. Members that do not overlap can still share a line.

In the example above, move assembly to 10:00 so it overlaps preparation, then enable multiline layout:

const assembly = dp.events.find("assembly");
assembly.data.start = "2026-09-01T10:00:00";
dp.update({eventContainersMultiLineEnabled: true});

Preparation and assembly now occupy two lines. The container reserves its full time span on both lines, so unrelated events cannot be inserted into gaps inside that block. With the default false setting, overlapping members remain on the same line and may cover one another.

Show Container Outlines

Containers are invisible by default. Set eventContainersVisible to true to draw an outline around each container:

dp.update({eventContainersVisible: true});

The outline works with both single-line and multiline containers. It changes their appearance without changing event placement. The default theme draws a dashed border using scheduler_default_event_container; a custom theme uses its own prefix.

Use eventContainersLayer to place the outline "Above" (the default) or "Below" the events:

dp.update({eventContainersLayer: "Below"});

Event backgrounds may cover parts of an outline placed below them. Outlines do not intercept mouse input, and they do not make the container draggable as a group.

Availability and Combinations

• Event containers are a DayPilot Pro feature, available since 2019.4.4052.

• Multiline layout is available since 2026.3.7041. Visible outlines and their layer setting are available since 2026.3.7042.

• Multiline containers and visible outlines cannot be combined with groupConcurrentEvents.

• Container outlines are not included in Scheduler image exports.

Demo

• JavaScript Scheduler Event Containers Demo

Tutorial

• JavaScript Scheduler: Event Placement Strategies