Agent-readable demo data
- Title
- Keyboard Navigation (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo
- Tree
- DayPilot JavaScript Demo
- Catalog root
- Default
- Description
- Use arrows, Shift + arrows, <enter>.
Read more about the Scheduler keyboard access.
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,
treePreventParentUsage: true,
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"}
]
},
],
heightSpec: "Max",
height: 300,
onTimeRangeSelected: async args => {
dp.keyboard.focusCell(args.end.addTime(-1), args.resource);
if (args.origin === "click") {
dp.clearSelection();
return;
}
const modal = await DayPilot.Modal.prompt("New event name:", "New Event");
dp.clearSelection();
const name = modal.result;
if (!name) return;
const e = new DayPilot.Event(
{
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: name
}
);
dp.events.add(e);
dp.keyboard.focusEvent(e);
dp.message("Created");
},
onEventClick: args => {
dp.keyboard.focusEvent(args.e);
dp.events.edit(args.e);
},
keyboardEnabled: true
});
dp.init();
dp.scrollTo("2026-05-01");
dp.keyboard.resetFocus();
const app = {
init() {
this.loadEventData();
},
loadEventData() {
const events = [
{"start":"2026-05-19T07:12:00.001","end":"2026-05-24T20:12:00.001","id":1,"resource":"D","text":"Event 1","bubbleHtml":"Event 1","barColor":"#3c78d8","barBackColor":"#a4c2f4"},
{"start":"2026-05-01T16:48:00","end":"2026-05-05T10:48:00","id":2,"resource":"D","text":"Event 2","bubbleHtml":"Event 2","barColor":"#6aa84f","barBackColor":"#b6d7a8"},
{"start":"2026-05-17T15:00:00","end":"2026-05-24T04:00:00","id":3,"resource":"D","text":"Event 3","bubbleHtml":"Event 3","barColor":"#f1c232","barBackColor":"#ffe599"},
{"start":"2026-05-06T11:24:00","end":"2026-05-13T00:24:00","id":4,"resource":"D","text":"Event 4","bubbleHtml":"Event 4","barColor":"#cc0000","barBackColor":"#ea9999"},
{"start":"2026-05-08T13:12:00","end":"2026-05-12T05:12:00","id":5,"resource":"F","text":"Event 5","bubbleHtml":"Event 5","barColor":"#3c78d8","barBackColor":"#a4c2f4"},
{"start":"2026-05-04T01:48:00","end":"2026-05-04T07:48:00","id":6,"resource":"F","text":"Event 6","bubbleHtml":"Event 6","barColor":"#6aa84f","barBackColor":"#b6d7a8"},
{"start":"2026-05-04T09:36:00","end":"2026-05-04T18:00:00","id":7,"resource":"F","text":"Event 7","bubbleHtml":"Event 7","barColor":"#f1c232","barBackColor":"#ffe599"},
{"start":"2026-05-08T04:48:00","end":"2026-05-14T21:48:00","id":8,"resource":"F","text":"Event 8","bubbleHtml":"Event 8","barColor":"#cc0000","barBackColor":"#ea9999"},
{"start":"2026-05-07T00:00:00","end":"2026-05-12T13:00:00","id":9,"resource":"I","text":"Event 9","bubbleHtml":"Event 9","barColor":"#3c78d8","barBackColor":"#a4c2f4"},
{"start":"2026-05-08T00:00:00","end":"2026-05-10T16:00:00","id":10,"resource":"J","text":"Event 10","bubbleHtml":"Event 10","barColor":"#6aa84f","barBackColor":"#b6d7a8"},
{"start":"2026-05-08T00:00:00","end":"2026-05-12T16:00:00","id":11,"resource":"K","text":"Event 11","bubbleHtml":"Event 11","barColor":"#f1c232","barBackColor":"#ffe599"},
{"start":"2026-05-09T00:00:00","end":"2026-05-15T17:00:00","id":12,"resource":"L","text":"Event 12","bubbleHtml":"Event 12","barColor":"#cc0000","barBackColor":"#ea9999"},
{"start":"2026-05-07T09:00:00","end":"2026-05-14T09:00:00","id":13,"resource":"D","text":"Event 13"},
{"start":"2026-05-06T07:12:00","end":"2026-05-11T19:48:00","id":14,"resource":"A","text":"Event 14"},
{"start":"2026-05-16T00:00:00","end":"2026-05-17T00:00:00","id":15,"resource":"A","text":"Event 15"},
{"start":"2026-05-16T00:00:00","end":"2026-05-17T00:00:00","id":16,"resource":"A","text":"Event 16"},
{"start":"2026-05-17T00:00:00","end":"2026-05-18T00:00:00","id":17,"resource":"A","text":"Event 17"},
{"start":"2026-05-14T00:00:00","end":"2026-05-15T00:00:00","id":18,"resource":"L","text":"Event 18"},
];
dp.update({events});
}
};
app.init();