Enhanced keyboard navigation for automatic timerange selection

What is the use case for this? Using the arrow keys without holding down the Shift key changes the current position, so detecting the user's intention somehow would be necessary.

When navigating with the keyboard without the Shift key, you also want the cell or event to be selected. But when you click on a cell or event with the mouse, you want the cursor (keyboard navigation) to move to this cell or event, so that when the user wants to navigate with the keyboard again, it starts from the clicked cell

The current problem is that when you navigate with the keyboard and the Shift key, DayPilot automatically selects the time range, but if you navigate without the Shift key, the time range is not automatically set.

> The current problem is that when you navigate with the keyboard and the Shift key, DayPilot automatically selects the time range, but if you navigate without the Shift key, the time range is not automatically set.

OK, this is by design - and it’s also how it behaves in Excel:

Simple arrow keys move the keyboard cursor, holding Shift while pressing arrow keys will select a time range (multiple cells).

I don’t see how this could work in a different way (maybe I’m missing something?).

> But when you click on a cell or event with the mouse, you want the cursor (keyboard navigation) to move to this cell or event.

Yes, this could be done. Instead of firing the onTimeRangeSelected event, a mouse click would just change the keyboard cursor.

What I want in the scheduler is one cursor, the cursor can select a cell or a event. How the cursor is moving doesn’t matter, by keyboard, mouse or by code.

When you use a Shift key or selecting by mouse (by holding left click) you want to select multiple cell’s and or events.

>OK, this is by design - and it’s also how it behaves in Excel:

>Simple arrow keys move the keyboard cursor, holding Shift while pressing arrow keys will select a time range (multiple cells).

>I don’t see how this could work in a different way (maybe I’m missing something?).

Why don’t select a cell or event when moving the cursor? In Excel when I move my cursor to the next cell, it selected the cell direct and I can edit or add something.

> Why don’t select a cell or event when moving the cursor? In Excel when I move my cursor to the next cell, it selected the cell direct and I can edit or add something.

OK, let’s see if I understand correctly.

The Scheduler works like this:

When you use the arrow keys, it moves the focus to the next cell (or event if there is one). If you want to edit the event or create a new event in the focused cell you can just press <enter>. The <enter> key is mapped to onTimeRangeSelect for cells and onEventClick for events.

You can use the keyboard API and inline editing to implement an Excel-like behavior:

1. Create a new event in onTimeRangeSelect and immediately activate the inline editing mode.

2. Edit an event inline in onEventClick.

The Excel-like editing keyboard logic (including Tab and Shift-Tab keys) is explained in the following tutorial:

• JavaScript Scheduler: How to Use the Keyboard API

Please let me know if this is not what you are looking for.

In the latest sandbox build (2023.4.5803), the onTimeRangeSelect event supports a new args.origin property which stores the source of this event ("click" | "drag" | "api" | "keyboard").

You can use it to change the grid cell click behavior so that it focuses the cell instead of creating a new event:

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");
},