Сворачивание

За сворачивание и разворачивание отвечает weeks: без motion нажатие на кнопку переключает вид мгновенно. Для перетаскивания подключите weeks и motion, для анимации завершения включите animation. Сам motion не включает недельный вид.

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

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

enableCollapse добавляет под сеткой элемент управления. Клик по нему сворачивает месяц до одной недели, повторный клик разворачивает обратно. По умолчанию опция выключена и не требует enableSwipe или animation.

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

Целевая неделя выбирается по первой выбранной дате, если она относится к отображаемому месяцу. Иначе календарь использует сегодняшний день, если он относится к этому месяцу, а в последнюю очередь — первое число отображаемого месяца.

В свёрнутом виде стрелки листают по одной неделе. При разворачивании календарь показывает месяц вокруг той же недели.

Тайминги

Переход использует опцию animation. Его тайминги можно настроить отдельно через группу collapse:

import { Calendar, weeks, motion } from 'vanilla-calendar-pro';
 
new Calendar('#calendar', {
  extensions: [weeks, motion],
  animation: { collapse: { duration: 450 } },
  enableCollapse: true,
});