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

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>

Области действия (Scopes)

Действия с клавиатурой зависят от контекста, то есть разные сочетания клавиш могут быть назначены различным элементам (областям) внутри 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 — активировать выбранную кнопку или дату

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

Наверх