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

Keyboard navigation from last cell

Asked by Anonymous
2 months ago.

Hi,
Referring to this tutorial: https://javascript.daypilot.org/demo/scheduler/keyboard.html

Immediately after loading the page, if I click on any cell (and whether I book something or not) and then I press the arrow keys, it doesn't navigate starting from that last clicked cell.

This is really confusing for the user and not intuitive. Is it possible to change this behaviour with some configuration or to set the focus on the last clicked cell, so it will navigate starting from it?

Comment posted by Anonymous
2 months ago.

If I press the Enter-key then it's fine. I want to have this exact same behaviour by clicking using the mouse. And id doesn't matter wether I click something or not. BTW: I'm not using the modal dialgo for booking. Instead of it I'm using the in-place editor.

Comment posted by Dan Letecky [DayPilot]
1 month ago.

Please note that the keyboard navigation and the mouse navigation (including clicks and drag and drop operations) are independent. The mouse actions don't change the focused element. The keyboard focus is only activated when you use the arrow keys and it will stay at the last position reached by the keyboard.

When the keyboard API is available (see https://forums.daypilot.org/question/5479/scheduler-keyboard-navigation-using-the-tab-key) you will be able to move the keyboard focus during mouse actions. This will let you implement this scenario.

Comment posted by Anonymous
1 month ago.

OK, thank you.
But right now is there a way to listen to the mouse click event and set the focus manually, as a workaround?

Comment posted by Dan Letecky [DayPilot]
1 month ago.

You can listen to the mouse events (e.g. using onEventClick) but the missing part is the keyboard API that would let you set the focus. Please let me check the status of the implementation, maybe it will be possible to publish at least an experimental API in the next release.

Comment posted by Anonymous
1 month ago.

Thank you very much. I really appreciate it.

Answer posted by Dan Letecky [DayPilot]
1 month ago.

With the latest version (https://javascript.daypilot.org/daypilot-pro-for-javascript-2021-3-5070/), you can update the keyboard focus in onEventClick event like this:

dp.onEventClick = args => {
  // ...
  dp.keyboard.focusEvent(args.e);
};

The following example will update the keyboard focus during time range selection (cell clicks):

dp.onTimeRangeSelected = args => {
  // ...
  dp.keyboard.focusCell(args.start, args.resource);
};
Comment posted by Anonymous
1 month ago.

How can I access the keyboard instance in Angular?

@ViewChild('scheduler') scheduler: DayPilotSchedulerComponent;
...
this.scheduler.control.keyboard; // keyboard doesn't exists in control

I then tried something like this, but I'm not sure if this is correct:

 this.scheduler.control.events.focus(args.e);

For focusCell() I didn't find anything

Comment posted by Dan Letecky [DayPilot]
1 month ago.

The keyboard API is not yet in the TypeScript definitions. You'll need to cast the DayPilot.Scheduler object to <any> to avoid compilation errors:

const dp = this.scheduler.control as any;
dp.keyboard.focusCell("2021-09-01", "R1");

The typings will be available in the next release.

Comment posted by Dan Letecky [DayPilot]
1 month ago.

The events.focus() method sets the browser native focus - it can't be used to change the keyboard focus:
https://api.daypilot.org/daypilot-scheduler-events-focus/

New Reply
This reply is
Your name (optional):