Release v3.3.1
Three headline features: motion, a week view you can swipe and fold, and an accessibility pass that touched nearly every element the calendar renders.
Highlights
- Animated transitions. The new
animationoption, off by default. Arrows and year paging slide, view switches cross-fade, folding has a curve of its own. Tunedurationandeasingglobally or per group —slide,fade,collapse.prefers-reduced-motionis honoured without asking. - A week at a time.
type: 'week'renders a single week and steps week by week;context.displayWeekDatetells you which one is on screen. - Swipe navigation.
enableSwipepages months, weeks and the year list with mouse, touch or pen. The grid follows the pointer, commits on distance or velocity, and stops exactly where the arrows stop. - Collapse to a week.
enableCollapsefolds a month down to the week holding the selected date — click the grabber or drag it — and unfolds it back. - Accessibility, properly. ARIA now describes what the calendar actually is. The date grid is a single tab stop instead of one per day, with the arrow keys walking the cells. Focus is no longer stolen on init or dropped while paging, and a closed
inputModepopup leaves the accessibility tree entirely. Checked against axe-core, Pa11y, IBM Equal Access and html-validate. - Partial aria labels.
labels.arrowNextandlabels.arrowPrevaccept a subset now — change one string without redeclaring the other two.
Upgrade notes
Nothing breaks at the API level, but the rendered DOM changed. Worth a look if you style or test against it:
- root element:
role="application"→role="group", orrole="dialog"ininputMode;tabindex0→-1 aria-selectedmoved from the date button onto its[data-vc-date]gridcell- week numbers render as
<b>unlessonClickWeekNumberis set - with
onClickWeekDay, the weekday header wraps a button — newstyles.weekDayBtnkey - the date grid keeps one tab stop, so
Tabno longer walks every date - time fields are plain
<div>wrappers now, and the sliders no longer carry aname role="toolbar"→role="group"in headers,role="region"→role="group"onmultiplecolumns- the weekday row is 24px tall to meet the WCAG target size, making calendars ~6px taller
layoutsgained aweekkeyenableCollapsepairs withdefaultandweekonly