Agent-readable demo data
- Title
- Group Concurrent Events (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo
- Tree
- DayPilot JavaScript Demo
- Catalog root
- Default
- Description
- Read more about the grouping concurrent events.
Inline demo script 1
const dp = new DayPilot.Scheduler("dp", {
startDate: "2026-01-01",
days: 365,
scale: "Day",
timeHeaders: [
{groupBy: "Month", format: "MMMM yyyy"},
{groupBy: "Cell", format: "d"}
],
treeEnabled: true,
resources: [
{name: "Room A", id: "A"}, {name: "Room B", id: "B"}, {name: "Room C", id: "C"},
{name: "Room D", id: "D"}, {name: "Room E", id: "E"}, {name: "Room F", id: "F"},
{name: "Room G", id: "G"}, {name: "Room H", id: "H"}, {name: "Room I", id: "I"},
{name: "Room J", id: "J"}, {name: "Room K", id: "K"}
],
onBeforeRowHeaderRender: args => {
const hasExpanded = args.row.groups.expanded().length > 0;
const hasCollapsed = args.row.groups.collapsed().length > 0;
if (hasExpanded && hasCollapsed) {
args.row.areas = [
{
v: "Visible",
right: 14,
top: 0,
height: 12,
width: 12,
style: "cursor:pointer",
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLyUoFBT0AAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAFJJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeRhgJGREc4GijMBtTNgA0BxFog+uA4IA2gmUJwFog/IgUhAGBB9KPYhA3T74Jog+hjx+A8A1KRQ+AN5vcwAAAAASUVORK5CYII=',
onClick: function (args) {
var row = args.source;
row.groups.expandAll();
}
},
{
v: "Visible",
right: 0,
top: 0,
height: 12,
width: 12,
style: "cursor:pointer",
image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLxB+p9DXAAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAENJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeSxAaA4E1A7VjmgOAtEHyMjI7IE0EygOAtEH5CDqY9c+xjx+A8ANndK9WaZlP4AAAAASUVORK5CYII=",
onClick: function (args) {
var row = args.source;
row.groups.collapseAll();
}
}
];
} else if (hasCollapsed) {
args.row.areas = [
{
v: "Visible",
right: 0,
top: 0,
height: 12,
width: 12,
style: "cursor:pointer",
image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLyUoFBT0AAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAFJJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeRhgJGREc4GijMBtTNgA0BxFog+uA4IA2gmUJwFog/IgUhAGBB9KPYhA3T74Jog+hjx+A8A1KRQ+AN5vcwAAAAASUVORK5CYII=",
onClick: function (args) {
var row = args.source;
row.groups.expandAll();
}
},
];
} else if (hasExpanded) {
args.row.areas = [
{
v: "Visible",
right: 0,
top: 0,
height: 12,
width: 12,
style: "cursor:pointer",
image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLxB+p9DXAAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAENJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeSxAaA4E1A7VjmgOAtEHyMjI7IE0EygOAtEH5CDqY9c+xjx+A8ANndK9WaZlP4AAAAASUVORK5CYII=",
onClick: function (args) {
var row = args.source;
row.groups.collapseAll();
}
}
];
}
},
onTimeRangeSelected: args => {
const name = prompt("New event name:", "Event");
dp.clearSelection();
if (!name) return;
dp.events.add({
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: name
});
dp.message("Created");
},
onBeforeGroupRender: args => {},
groupBubble: new DayPilot.Bubble({
onLoad: args => {
const count = args.source.events.length;
args.html = `Click to expand this group of ${count} events.`;
}
}),
groupConcurrentEvents: true,
groupConcurrentEventsLimit: 1,
sortDirections: ["asc"]
});
dp.init();
dp.scrollTo("2026-11-25");
const app = {
init() {
this.loadEventData();
},
loadEventData() {
const events = [
{
start: "2026-11-30T00:00:00",
end: "2026-12-01T18:00:00",
id: "b44007a4-520f-5e8c-febb-b05c359ce18d",
resource: "B",
text: "Event"
},
{
start: "2026-11-28T00:00:00",
end: "2026-11-30T16:00:00",
id: "d79db2db-f76b-c32e-b5d5-9538a016f681",
resource: "C",
text: "Event"
},
{
start: "2026-12-01T00:00:00",
end: "2026-12-02T15:00:00",
id: "7d33dbb4-c1c9-76cf-dc42-d10b115216bf",
resource: "C",
text: "Event"
},
{
start: "2026-11-30T00:00:00",
end: "2026-12-03T13:00:00",
id: "e8ac07f2-d5ff-afc1-85cd-bc70bcefbc89",
resource: "A",
text: "Event"
},
{
start: "2026-11-29T00:00:00",
end: "2026-12-01T17:00:00",
id: "7b70d267-b437-b384-6c4c-820b0085baed",
resource: "D",
text: "Event"
},
{
start: "2026-11-29T00:00:00",
end: "2026-11-30T13:00:00",
id: "01a50b6b-2a6e-5268-e45c-5e33aabd2520",
resource: "E",
text: "Event"
},
{
start: "2026-11-29T00:00:00",
end: "2026-11-29T18:00:00",
id: "c186e3dd-8c33-6e9a-c8be-5411fc88c990",
resource: "C",
text: "Event"
},
{
start: "2026-11-28T00:00:00",
end: "2026-11-30T14:00:00",
id: "2e28f67c-ddfa-013b-e66c-8abed108279b",
resource: "E",
text: "Event"
},
{
start: "2026-11-30T00:00:00",
end: "2026-12-01T16:00:00",
id: "3d4abc2c-f3c4-89fc-7558-a1c6c75cfe09",
resource: "D",
text: "Event"
},
{
start: "2026-11-30T00:00:00",
end: "2026-12-02T17:00:00",
id: "484ba1ef-0295-0693-05e0-c80f120f137c",
resource: "B",
text: "Event"
},
{
start: "2026-11-30T00:00:00",
end: "2026-11-30T14:00:00",
id: "01a36e2e-ec37-a7f1-508a-858073288fea",
resource: "D",
text: "Event"
},
{
start: "2026-11-30T00:00:00",
end: "2026-11-30T18:00:00",
id: "9608cd21-5374-cc47-4777-7755982f5f06",
resource: "D",
text: "Event"
},
{
start: "2026-11-27T00:00:00",
end: "2026-11-27T16:00:00",
id: "b3d465c2-f6d5-6984-b2a0-9dc766a6aabc",
resource: "D",
text: "Event"
},
{
start: "2026-11-30T00:00:00",
end: "2026-12-01T18:00:00",
id: "a54d3aa1-64a8-4051-e47f-fa4319a6ae2e",
resource: "D",
text: "Event"
},
{
start: "2026-12-01T00:00:00",
end: "2026-12-06T15:00:00",
id: "e63c739c-945f-daa0-d991-5e734345dfa2",
resource: "C",
text: "Event"
},
{
start: "2026-12-01T00:00:00",
end: "2026-12-01T10:15:00",
id: "761debfc-6ec6-fe00-4279-ebdf661b827e",
resource: "H",
text: "Test 1"
},
{
start: "2026-12-03T00:00:00",
end: "2026-12-05T00:00:00",
id: "f1b1b1b1-1b1b-1b1b-1b1b-1b1b1b1b1b1c",
resource: "G",
text: "Sort 1",
sort: [
1
]
},
{
start: "2026-12-01T10:15:00",
end: "2026-12-02T00:00:00",
id: "a23bfb40-a221-f54d-a1b0-dd1cd6833b1e",
resource: "H",
text: "Test 2"
},
{
start: "2026-12-01T00:00:00",
end: "2026-12-06T00:00:00",
id: "f1b1b1b1-1b1b-1b1b-1b1b-1b1b1b1b1b1b",
resource: "G",
text: "Sort 3",
sort: [
3
]
},
{
start: "2026-12-04T00:00:00",
end: "2026-12-08T00:00:00",
id: "f1b1b1b1-1b1b-1b1b-1b1b-1b1b1b1b1b1d",
resource: "G",
text: "Sort 4",
sort: [
4
]
},
{
start: "2026-12-07T00:00:00",
end: "2026-12-08T00:00:00",
id: "f1b1b1b1-1b1b-1b1b-1b1b-1b1b1b1b1b1e",
resource: "G",
text: "Sort 2",
sort: [
2
]
},
];
dp.update({events});
}
};
app.init();