Agent-readable demo data
- Title
- Event Containers (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo
- Tree
- DayPilot JavaScript Demo
- Catalog root
- Default
- Description
- Events with the same number and color belong to one container. Allowing multiple lines stacks overlapping
members and reserves the entire container rectangle, including its gaps. Turn it off to compare the original
single-line layout.
Read more about event containers
[doc.daypilot.org].
Inline demo script 1
const dp = new DayPilot.Scheduler("dp", {
startDate: "2026-10-01",
days: 14,
scale: "Day",
cellWidthSpec: "Auto",
cellWidthMin: 45,
eventHeight: 30,
eventContainersMultiLineEnabled: true,
eventContainersVisible: true,
eventContainersLayer: "Above",
rowHeaderWidth: 210,
rowMarginTop: 4,
rowMarginBottom: 4,
timeHeaders: [
{groupBy: "Month", format: "MMMM yyyy"},
{groupBy: "Day", format: "d"}
],
resources: [
{name: "Overlapping members", id: "A"},
{name: "Reusing an internal line", id: "B"},
{name: "Reserved gaps", id: "C"},
{name: "Below an existing event", id: "D"},
{name: "Multiple containers", id: "E"}
],
onTimeRangeSelected: async args => {
const modal = await DayPilot.Modal.prompt("New event name:", "New Event");
dp.clearSelection();
if (modal.canceled) {
return;
}
dp.events.add({
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: modal.result
});
dp.message("Created");
},
onBeforeEventRender: args => {
const colors = {
1: ["#dbeafe", "#2563eb"],
2: ["#dcfce7", "#16a34a"],
3: ["#ffedd5", "#ea580c"],
4: ["#f3e8ff", "#9333ea"],
5: ["#cffafe", "#0891b2"],
6: ["#fce7f3", "#db2777"],
7: ["#fef9c3", "#ca8a04"]
};
const colorsForContainer = colors[args.data.container];
if (colorsForContainer) {
args.data.backColor = colorsForContainer[0];
args.data.barColor = colorsForContainer[1];
args.data.toolTip = `Container ${args.data.container}: ${args.data.text}`;
}
},
height: 550
});
dp.init();
const app = {
init() {
this.addEventHandlers();
this.loadEventData();
},
addEventHandlers() {
const multiline = document.getElementById("multiline");
const outline = document.getElementById("containerOutline");
const layer = document.getElementById("containerLayer");
const update = () => {
layer.disabled = !outline.checked;
dp.update({
eventContainersMultiLineEnabled: multiline.checked,
eventContainersVisible: outline.checked,
eventContainersLayer: layer.value
});
};
multiline.addEventListener("change", update);
outline.addEventListener("change", update);
layer.addEventListener("change", update);
},
loadEventData() {
const events = [
// Three overlapping members need three internal lines.
{id: "1A", resource: "A", text: "1A", container: 1, start: "2026-10-02", end: "2026-10-07"},
{id: "1B", resource: "A", text: "1B", container: 1, start: "2026-10-04", end: "2026-10-09"},
{id: "1C", resource: "A", text: "1C", container: 1, start: "2026-10-05", end: "2026-10-08"},
// 2C starts when 2A ends, so it can reuse the first internal line.
{id: "2A", resource: "B", text: "2A", container: 2, start: "2026-10-02", end: "2026-10-05"},
{id: "2B", resource: "B", text: "2B", container: 2, start: "2026-10-03", end: "2026-10-06"},
{id: "2C", resource: "B", text: "2C", container: 2, start: "2026-10-05", end: "2026-10-08"},
// The unrelated event cannot occupy the empty part of either container line.
{id: "3A", resource: "C", text: "3A", container: 3, start: "2026-10-02", end: "2026-10-04"},
{id: "gap", resource: "C", text: "Event in gap", start: "2026-10-05", end: "2026-10-07"},
{id: "3B", resource: "C", text: "3B", container: 3, start: "2026-10-08", end: "2026-10-11"},
{id: "3C", resource: "C", text: "3C", container: 3, start: "2026-10-09", end: "2026-10-12"},
// An existing event pushes the entire two-line block down together.
{id: "existing", resource: "D", text: "Existing event", start: "2026-10-02", end: "2026-10-06"},
{id: "4A", resource: "D", text: "4A", container: 4, start: "2026-10-03", end: "2026-10-07"},
{id: "4B", resource: "D", text: "4B", container: 4, start: "2026-10-04", end: "2026-10-08"},
// Containers 5 and 6 overlap as blocks; container 7 reuses their earlier lines.
{id: "5A", resource: "E", text: "5A", container: 5, start: "2026-10-02", end: "2026-10-06"},
{id: "5B", resource: "E", text: "5B", container: 5, start: "2026-10-03", end: "2026-10-05"},
{id: "6A", resource: "E", text: "6A", container: 6, start: "2026-10-04", end: "2026-10-08"},
{id: "6B", resource: "E", text: "6B", container: 6, start: "2026-10-05", end: "2026-10-07"},
{id: "7A", resource: "E", text: "7A", container: 7, start: "2026-10-09", end: "2026-10-12"},
{id: "7B", resource: "E", text: "7B", container: 7, start: "2026-10-10", end: "2026-10-13"}
];
dp.update({events});
}
};
app.init();