Свайп

При обновлении с версии без расширений сохраните прежние опции и обработчики. Для ESM добавьте именованный импорт и зарегистрируйте motion в конструкторе: extensions: [motion]. Вызывать расширение как функцию не нужно. Импорт или регистрация сами по себе не включают функцию.

import { Calendar, motion } from 'vanilla-calendar-pro';
 
new Calendar('#calendar', {
  extensions: [motion],
  enableSwipe: true,
}).init();

enableSwipe позволяет тянуть содержимое календаря в сторону. По умолчанию опция выключена, работает независимо от enableCollapse и animation и может использоваться во всех представлениях, где есть стрелки: default, multiple, week и в списке годов. Жест шагает ровно на столько же, на сколько стрелки в текущем представлении.

Соседний период рендерится сразу в начале жеста и едет вместе с указателем, поэтому во время тяги видно, куда календарь придёт, а не пустое место. При медленной тяге нужно пройти четверть ширины, а быстрый взмах может перелистнуть раньше, потому что учитывается и скорость отпускания. В остальных случаях содержимое уезжает обратно.

Тайминги

Жест использует группу slide опции animation, то есть те же тайминги, что и навигация стрелками:

import { Calendar, motion } from 'vanilla-calendar-pro';
 
new Calendar('#calendar', {
  extensions: [motion],
  animation: { slide: { duration: 350 } },
  enableSwipe: true,
});

Поиск по календарю во время жеста

Свайп опирается на тот же слой-призрак, что и анимация стрелок, поэтому пока он идёт, уходящий период остаётся в DOM внутри элемента [data-vc-ghost] с атрибутом inert, и ячейки дат на это время присутствуют дважды. Исключайте этот слой, если обходите их из своего кода.

const dates = calendar.context.mainElement.querySelectorAll('[data-vc-date]');
const visible = [...dates].filter((date) => !date.closest('[data-vc-ghost]'));