search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Enhanced keyboard navigation for automatic timerange selection

Asked by Santor Schuddebeurs
10 months ago.

I am endeavoring to implement keyboard navigation in DayPilot that mirrors the functionality found in Microsoft Excel. This implementation would ideally ensure that the time range is automatically selected when navigating through the scheduler, both via keyboard and mouse inputs.

While I have made some progress using a variety of coding approaches, I have not yet fully achieved the desired outcome. A notable challenge arises when utilizing the shift key in conjunction with keyboard navigation. Currently, DayPilot automatically selects the time range in this scenario, yet it does not do so when navigating without the shift key.

Would it be possible to enhance the functionality to include an option where the time range is automatically selected during keyboard navigation?"

Comment posted by Dan Letecky [DayPilot]
10 months ago.

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.

Comment posted by Santor Schuddebeurs
10 months ago.

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.

Comment posted by Dan Letecky [DayPilot]
10 months ago.

> 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.

Comment posted by Santor Schuddebeurs
10 months ago.

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.

Answer posted by Dan Letecky [DayPilot]
10 months ago.

> 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:

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

Comment posted by Dan Letecky [DayPilot]
10 months ago.

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");
},
This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.