# Keyboard Navigation (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

> Use arrows, Shift + arrows, <enter>. Read more about the [Scheduler keyboard access](https://doc.daypilot.org/scheduler/keyboard/).

## Links

- Canonical HTML: /demo/scheduler/keyboard.html
- Source HTML folder: /demo/scheduler/
- Catalog root: /demo/
- Catalog: /demo/llms.txt

## Source

### Inline demo script 1

```javascript
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();
```