Agent-readable demo data
- Title
- JavaScript Scheduler | DayPilot Pro for JavaScript Demo
- Tree
- DayPilot JavaScript Demo
- Catalog root
- Default
- Description
- Read more about progressive event rendering.
Inline demo script 1
const dp = new DayPilot.Scheduler("dp", {
startDate: "2026-04-01",
days: 365,
scale: "Day",
timeHeaders: [
{groupBy: "Month", format: "MMMM yyyy"},
{groupBy: "Day", format: "d"}
],
treeEnabled: true,
rowMarginTop: 2,
rowMarginBottom: 2,
treePreventParentUsage: true,
heightSpec: "Max",
height: 400,
eventMovingStartEndEnabled: true,
eventResizingStartEndEnabled: true,
timeRangeSelectingStartEndEnabled: true,
rowHeaderColumns: [
{name: "Resource", display: "name"},
{name: "ID", display: "id"}
],
contextMenu: new DayPilot.Menu({
items: [
{
text: "Edit",
onClick: (args) => {
dp.events.edit(args.source);
}
},
{
text: "Delete",
onClick: (args) => {
dp.events.remove(args.source);
}
},
{text: "-"},
{
text: "Select",
onClick: (args) => {
dp.multiselect.add(args.source);
}
},
]
}),
bubble: new DayPilot.Bubble({
onLoad: (args) => {
const e = args.source;
const text = DayPilot.Util.escapeHtml(e.text());
const start = e.start().toString("M/d/yyyy h:mm tt");
const end = e.end().toString("M/d/yyyy h:mm tt");
args.html = `<div><b>${text}</b></div><div>Start: ${start}</div><div>End: ${end}</div>`;
},
}),
onEventMoved: (args) => {
const text = args.e.text();
dp.message(`The event has been moved (${text})`);
},
onEventMoving: (args) => {
// see more examples at https://doc.daypilot.org/scheduler/event-moving-customization/
if (args.e.resource() === "A" && args.resource === "B") { // don't allow moving from A to B
args.left.enabled = false;
args.right.html = "You can't move an event from Room 1 to Room 2";
args.allowed = false;
}
else if (args.resource === "B") { // must start on a working day, maximum length one day
while (args.start.getDayOfWeek() === 0 || args.start.getDayOfWeek() === 6) {
args.start = args.start.addDays(1);
}
args.end = args.start.addDays(1); // fixed duration
args.left.enabled = false;
args.right.html = "Events in Room 2 must start on a workday and are limited to 1 day.";
}
},
onEventResized: (args) => {
dp.message("Resized: " + args.e.text());
},
onTimeRangeSelected: async (args) => {
const modal = await DayPilot.Modal.prompt("New event name:", "New Event")
dp.clearSelection();
if (modal.canceled) {
return;
}
const name = modal.result;
dp.events.add({
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: name
});
dp.message("Created");
},
onEventMove: (args) => {
if (args.ctrl) {
dp.events.add({
start: args.newStart,
end: args.newEnd,
text: "Copy of " + args.e.text(),
resource: args.newResource,
id: DayPilot.guid() // generate random id
});
// notify the server about the action here
args.preventDefault(); // prevent the default action - moving event to the new location
}
},
onEventClick: (args) => {
DayPilot.Modal.alert(args.e.data.text);
},
onBeforeEventRender: args => {
args.data.areas = [
{
right: 2,
top: "calc(50% - 9px)",
width: 18,
height: 18,
style: "cursor:pointer;",
backColor: "#cccccc88",
borderRadius: "50%",
padding: 2,
fontColor: "#333333",
symbol: "../icons/daypilot.svg#threedots-h",
action: "ContextMenu",
toolTip: "Menu"
}
];
},
separators: [
{location: new DayPilot.Date("2026-09-01"), color: "red", toolTip: "Test"},
],
scrollDelayEvents: "Auto",
dynamicEventRenderingCacheSweeping: true,
dynamicEventRenderingCacheSize: 300,
dynamicEventRenderingMarginX: 200,
dynamicEventRenderingMarginY: 200
});
dp.init();
dp.scrollTo("2026-04-01");
const app = {
barColor(i) {
const colors = ["#3c78d8", "#6aa84f", "#f1c232", "#cc0000"];
return colors[i % 4];
},
barBackColor(i) {
const colors = ["#a4c2f4", "#b6d7a8", "#ffe599", "#ea9999"];
return colors[i % 4];
},
loadData() {
const resources = [];
for (let y = 0; y < 200; y++) {
resources.push({name: "Resource " + y, id: y});
}
const events = [];
for (let y = 0; y < 200; y++) {
for (let x = 0; x < 20; x++) {
const i = y*20 + x + 1;
const e = {
start: new DayPilot.Date("2026-04-05T12:00:00").addDays(x),
end: new DayPilot.Date("2026-04-05T12:00:00").addDays(x + 1),
id: i,
resource: y,
text: "Event " + (i),
bubbleHtml: "Event " + (i),
barColor: app.barColor(i),
barBackColor: app.barBackColor(i)
};
events.push(e);
}
}
dp.update({resources, events});
},
addEventHandlers() {
document.querySelector("#scrollDelayEvents").addEventListener("change", (ev) => {
const value = ev.target.value.trim();
dp.scrollDelayEvents = value.toLowerCase() === "auto" ? "Auto" : Number(value);
});
document.querySelector("#dynamicEventRenderingCacheSweeping").addEventListener("change", (ev) => {
dp.dynamicEventRenderingCacheSweeping = ev.target.checked;
});
document.querySelector("#dynamicEventRenderingCacheSize").addEventListener("change", (ev) => {
dp.dynamicEventRenderingCacheSize = Number(ev.target.value);
});
document.querySelector("#dynamicEventRenderingMargin").addEventListener("change", (ev) => {
const value = Number(ev.target.value);
dp.dynamicEventRenderingMarginX = value;
dp.dynamicEventRenderingMarginY = value;
});
},
init() {
app.addEventHandlers();
app.loadData();
}
};
app.init();