Анимация
При обновлении с версии без расширений сохраните прежние опции и обработчики. Для ESM добавьте именованный импорт и зарегистрируйте motion в конструкторе: extensions: [motion]. Вызывать расширение как функцию не нужно. Импорт или регистрация сами по себе не включают функцию.
import { Calendar, motion } from 'vanilla-calendar-pro';
new Calendar('#calendar', {
extensions: [motion],
animation: true,
}).init();Переходы между представлениями можно анимировать. Навигация стрелками и свайп едут по горизонтали, пикеры месяца и года используют кроссфейд, а сворачивание анимирует высоту календаря между месяцем и неделей.
По умолчанию анимация выключена ради обратной совместимости: опция появилась позже, а слайд и кроссфейд на короткое время меняют то, что видит поиск по DOM.
Один тайминг на всё
Объект вместо true переопределяет тайминг. Значения верхнего уровня достаются всем переходам.
Раздельные тайминги
Три группы переходов можно настроить независимо. Вложите значения в slide для стрелок и свайпа, в fade для пикеров или в collapse для сворачивания месяца до недели. Вложенные значения важнее заданных на верхнем уровне.
В примере ниже у слайда кривая с перелётом, а пикеры и сворачивание используют собственные более спокойные тайминги.
Анимация завершения не проигрывается, если посетитель запросил уменьшение движения через prefers-reduced-motion: reduce. Жесты продолжают следовать за
указателем и завершаются мгновенно после отпускания.
Поиск по календарю во время анимации
Во время слайда и кроссфейда уходящее содержимое остаётся в DOM внутри слоя [data-vc-ghost] с атрибутом inert, поэтому элементы дат могут на короткое время присутствовать дважды. Колбэки вроде onClickArrow и onClickDate вызываются внутри этого окна, так что исключайте слой, если обходите календарь из них. Сворачивание слой-призрак не создаёт.
const dates = calendar.context.mainElement.querySelectorAll('[data-vc-date]');
const visible = [...dates].filter((date) => !date.closest('[data-vc-ghost]'));