Animation
Transitions between views can be animated. Arrow navigation and swiping slide horizontally, the month and year pickers cross-fade, and collapsing animates the calendar between its month and week heights.
Animation is off by default for backwards compatibility: the option was added later, and slide and cross-fade transitions temporarily change what a DOM query sees.
One Timing for Everything
Passing an object instead of true overrides the timing. Values at the top level reach every transition.
Separate Timings
The three groups can be tuned independently. Nest values under slide for arrows and swiping, fade for pickers, or collapse for folding between the month and week. Nested values win over the ones at the top level.
The example below gives the slide an overshooting curve, while the pickers and collapse control use their own calmer timings.
Animated settling is skipped when the visitor asks for reduced motion through prefers-reduced-motion: reduce. Gestures still follow the pointer and settle
immediately on release.
Querying the Calendar While It Animates
During slide and cross-fade transitions, the outgoing content stays in the DOM inside an inert [data-vc-ghost] layer, so date elements can momentarily be present twice. Callbacks such as onClickArrow and onClickDate fire inside that window, so exclude the layer if you inspect the calendar from them. Collapsing does not create a ghost layer.
const dates = calendar.context.mainElement.querySelectorAll('[data-vc-date]');
const visible = [...dates].filter((date) => !date.closest('[data-vc-ghost]'));