Agent-readable demo data
- Title
- JavaScript Scheduler | DayPilot Pro for JavaScript Demo
- Tree
- DayPilot JavaScript Demo
- Catalog root
- Default
- Description
- Customize the component using Scheduler UI Builder
and download a ready-to-run project.
Read more about the JavaScript scheduler.
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"},
]
});
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 = [
{
name: "Locations", id: "G1", expanded: true, children: [
{name: "Room 1", id: "A"},
{name: "Room 2", id: "B"},
{name: "Room 3", id: "C"},
{name: "Room 4", id: "D"},
]
},
{
name: "People", id: "G2", expanded: true, children: [
{name: "Person 1", id: "E"},
{name: "Person 2", id: "F"},
{name: "Person 3", id: "G"},
{name: "Person 4", id: "H"}
]
},
{
name: "Tools", id: "G3", expanded: true, children: [
{name: "Tool 1", id: "I"},
{name: "Tool 2", id: "J"},
{name: "Tool 3", id: "K"},
{name: "Tool 4", id: "L"}
]
},
{
name: "Other Resources", id: "G4", expanded: true, children: [
{name: "Resource 1", id: "R1"},
{name: "Resource 2", id: "R2"},
{name: "Resource 3", id: "R3"},
{name: "Resource 4", id: "R4"}
]
},
];
const events = [];
for (let i = 0; i < 12; i++) {
const duration = Math.floor(Math.random() * 6) + 1; // 1 to 6
const durationDays = Math.floor(Math.random() * 6) + 1; // 1 to 6
const start = Math.floor(Math.random() * 6) + 2; // 2 to 7
const e = {
start: new DayPilot.Date("2026-04-05T12:00:00").addDays(start),
end: new DayPilot.Date("2026-04-05T12:00:00").addDays(start).addDays(durationDays).addHours(duration),
id: i + 1,
resource: String.fromCharCode(65 + i),
text: "Event " + (i + 1),
bubbleHtml: "Event " + (i + 1),
barColor: app.barColor(i),
barBackColor: app.barBackColor(i)
};
events.push(e);
}
dp.update({resources, events});
},
};
app.loadData();