Перейти к основному содержимому

Клавиатурная навигация

Вы можете получить доступ к Scheduler и его элементам с помощью клавиш или их комбинаций. Эта статья даст вам всю необходимую информацию об особенностях клавиатурной навигации в Scheduler, включая поведение фокуса, использование готовых сочетаний клавиш и создание пользовательских.

Включение функциональности​

Чтобы использовать клавиатурную навигацию в Scheduler, нужно включить на странице расширение key_nav.

scheduler.plugins({
    key_nav: true
});

Поведение фокуса во время клавиатурной навигации​

Фокус на Scheduler​

Когда нажата клавиша Tab, фокус переходит на Scheduler так же, как и на любой обычный элемент. После этого для навигации по Scheduler можно использовать клавиши со стрелками и другие.

Когда клавиша Tab нажата второй раз, фокус покидает Scheduler и перемещается в другое место на странице.

Фокус на модальном окне​

Когда открывается модальное окно (lightbox, окно подтверждения), фокус перемещается с Scheduler на это окно, и навигация происходит внутри него как в простой форме. Когда окно закрывается, фокус возвращается к Scheduler.

Чтобы вернуть фокус обратно к Scheduler, нужно использовать метод focus.

scheduler.focus();

Когда Scheduler снова получает фокус, он устанавливает фокус на активном элементе внутри него, или на первую строку, или на последний выбранный элемент.

Стандартные действия навигации в модальном окне следующие:

  • Enter — подтвердить и закрыть
  • Escape — закрыть без изменений

Если фокус установлен на какой-либо кнопке формы, нажатие Space или Enter вызовет нажатие кнопки, на которую установлен фокус, а не действие.

Стилизация ячеек в фокусе​

Когда устанавливается фокус на ячейку, она подсвечивается серым/желтым цветом. Если нужно изменить этот стиль, используйте CSS-класс .dhx_focus_slot:

<style>
    .dhx_focus_slot{
        background-color: #fff;
    }
</style>

Контексты​

Действие, вызываемое по клику клавишей, зависит от контекста. Это означает, что разные действия могут быть привязаны к разным элементам (контекстам). В Scheduler существуют следующие элементы контекста (scopes):

  • "scheduler" - весь Scheduler
  • "timeSlot" - таймслот
  • "event" - событие
  • "minicalDate" - дата в мини-календаре
  • "minicalButton" - кнопка-стрелка в мини-календаре

Если одно и то же сочетание клавиш привязано к нескольким контекстам, сработает более специфическое сочетание. Это значит, что если одно и то же сочетание клавиш привязано к Scheduler и к его элементу, будет вызываться сочетание, привязанное к элементу, а не ко всему Scheduler.

Добавление сочетания клавиш​

Чтобы создать новое сочетание клавиш, нужно использовать метод addShortcut и передать ему три параметра:

  • shortcut — (string) новое сочетание клавиш или название сочетания клавиш
  • handler — (function) функция-обработчик, которая будет вызвана при вызове сочетания клавиш
  • scope — (string) название элемента контекста, к которому привязана функция-обработчик
scheduler.addShortcut("shift+w", function(e){ 
    const target = e.target;
    if(target.closest("[event_id]"))
        const eventId = target.getAttribute("event_id");

    if(eventId) 
        scheduler.showQuickInfo(eventId);
},"event");

Удаление сочетания клавиш​

Чтобы удалить сочетание клавиш из контекста, нужно использовать метод removeShortcut. Метод принимает два параметра:

  • shortcut — (string) имя клавиши или комбинации клавиш для сочетания
  • scope — (string) название элемента контекста, к которому привязано сочетание
scheduler.removeShortcut("shift+w","event");

Получение обработчика сочетания клавиш​

Получить обработчик клавиатурного сочетания можно с помощью метода getShortcutHandler. Он принимает два параметра:

  • shortcut — (string) имя клавиши или комбинации клавиш для сочетания
  • scope — (string) название элемента контекста, к которому привязано сочетание
const shortcut_handler = scheduler.getShortcutHandler("shift+w","event");

Метод возвращает функцию, которая представляет обработчик вызова сочетания клавиш.

Синтаксис сочетания клавиш​

Клавиатурное сочетание может состоять из следующих клавиш или комбинаций клавиш:

  • модификаторная клавиша + символическая клавиша ("ctrl+a");
  • модификаторная клавиша + несимволическая клавиша ("ctrl+space");
  • символическая клавиша ("a");
  • несимволическая клавиша ("space")

Для одного действия может быть несколько сочетаний клавиш. В этом случае все комбинации перечислены через запятую: "ctrl+a, ctrl+space".

Список поддерживаемых клавиш для использования в сочетаниях​

  • модификаторы: shift, alt, ctrl, meta;
  • несимволические клавиши: backspace, tab, enter, esc, space, up, down, left, right, home, end, pageup, pagedown, delete, insert, plus, f1-f12.

Существующие сочетания клавиш​

Существует набор готовых сочетаний клавиш, которые можно использовать для навигации по Scheduler:

Общие сочетания клавиш​

  • Tab — устанавливает фокус на Scheduler
  • Alt+1,Alt+2,Alt+3,... — переключение между представлениями
  • Ctrl+Left/Right — переход к следующей/предыдущей дате
  • Ctrl+Up/Down — прокрутка области данных
  • Ctrl+Enter — создание нового события
  • E, Shift+E — выбор следующего/предыдущего события
  • Home — переключение на текущую дату
  • Ctrl+C, Ctrl+X, Ctrl+V — копирование/вырезание/вставка события

Сочетания клавиш для таймслотов​

  • Up/Down/Left/Right Arrow Keys — навигация по таймслотам
  • Shift+Up/Down/Left/Right Arrow Keys — расширение таймслота
  • Enter — создание события в выбранном таймслоте

Сочетания клавиш для событий​

  • Up/Down/Left/Right Arrow Keys — переход к таймслоту
  • Enter — открыть lightbox

Сочетания клавиш для мини-календаря​

  • Tab — устанавливает фокус на мини-календарь
  • Up/Down/Left/Right Arrow Keys — навигация по кнопкам/клеткам
  • Enter — клик по кнопке/клетке

Keyboard Navigation and WAI-ARIA - Flat Skin

Keyboard navigation in the scheduler

Связанные события​

Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.
Need more help?Contact Support