Свайп
enableSwipe позволяет тянуть содержимое календаря в сторону. По умолчанию опция выключена, работает независимо от enableCollapse и animation и может использоваться во всех представлениях, где есть стрелки: default, multiple, week и в списке годов. Жест шагает ровно на столько же, на сколько стрелки в текущем представлении.
Соседний период рендерится сразу в начале жеста и едет вместе с указателем, поэтому во время тяги видно, куда календарь придёт, а не пустое место. При медленной тяге нужно пройти четверть ширины, а быстрый взмах может перелистнуть раньше, потому что учитывается и скорость отпускания. В остальных случаях содержимое уезжает обратно.
Жест забирает только горизонтальную ось, поэтому страница над календарём по-прежнему прокручивается вертикально. Свайп доступен, только пока видна
соответствующая стрелка, поэтому учитывает dateMin, dateMax и ограничения навигации. Дата под указателем в момент отпускания не выбирается.
Тайминги
Жест использует группу slide опции animation, то есть те же тайминги, что и навигация стрелками:
new Calendar('#calendar', {
animation: { slide: { duration: 350 } },
enableSwipe: true,
});Без animation или при запросе уменьшения движения через prefers-reduced-motion: reduce тяга всё так же следует за указателем, но отпускание срабатывает
мгновенно.
Поиск по календарю во время жеста
Свайп опирается на тот же слой-призрак, что и анимация стрелок, поэтому пока он идёт, уходящий период остаётся в DOM внутри элемента [data-vc-ghost] с атрибутом inert, и ячейки дат на это время присутствуют дважды. Исключайте этот слой, если обходите их из своего кода.
const dates = calendar.context.mainElement.querySelectorAll('[data-vc-date]');
const visible = [...dates].filter((date) => !date.closest('[data-vc-ghost]'));