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

Навигация с помощью клавиатуры

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. Доступные области:

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

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

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

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

  • shortcut - (string) клавиша или комбинация клавиш
  • handler - (function) функция, вызываемая при срабатывании сочетания
  • scope - (string) элемент-контекст, к которому привязывается обработчик
scheduler.addShortcut("shift+w", function(e){ 
    var target = e.target;
    if(target.closest("[event_id]"))
        var 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) элемент-контекст, к которому привязано сочетание
var 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 - перемещение между временными слотами
  • Shift+стрелки Up/Down/Left/Right - расширение выбранного временного слота
  • Enter - создать событие в выбранном слоте

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

  • Стрелки Up/Down/Left/Right - переход к временному слоту
  • Enter - открыть lightbox

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

  • Tab - фокус на мини-календаре
  • Стрелки Up/Down/Left/Right - навигация по кнопкам и датам
  • 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