Release v3.4.0

3.4.0 — A lighter, more flexible calendar

• Choose what you need. Import individual features and styles to keep your application bundle smaller.
• Improved performance. Faster date updates and multi-month navigation, especially with large calendars and date lists.
• More reliable interactions. Fixed date ranges across daylight-saving changes, initial AM/PM and popup hover behavior.
• Improved stability and security. Broader automated testing and safer configuration handling.

Updating from 3.3.2

ESM users: import and register the extensions you use. To keep all features:

import { Calendar, motion, time, annotations, weeks, months } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/styles/index.css';

new Calendar('#calendar', {
  extensions: [motion, time, annotations, weeks, months],
  // Keep your existing options and callbacks.
}).init();

Remove unused imports and array entries to reduce your bundle. Classic scripts and CommonJS need no migration.

Detailed migration guide →

Bundle sizes

Compared with 3.3.2 from npm, in kB. JavaScript uses identical application bundling settings; CSS is measured as shipped. Version 3.3.2 includes all features.

Bundle	3.3.2 without gzip	3.4.0 without gzip	3.3.2 gzip	3.4.0 gzip
Core JavaScript	72.46	54.55	20.29	16.86
All JavaScript features	72.46	82.32	20.29	25.14
Core CSS, light + dark	54.78	38.26	5.53	3.55

Core JavaScript is 24.7% smaller before gzip, and core CSS is 30.2% smaller. JavaScript with all features is larger.

Performance

Chrome 153, Intel i9-9900K, 4× CPU throttling, median of 20 samples.

Scenario	3.3.2	3.4.0	Speedup
Update selected dates, 12 months	89.0 ms	10.8 ms	8.24×
Navigate, 12-month view	74.9 ms	12.5 ms	5.99×
Update selection with 5,000 unsorted disabled dates	138.9 ms	9.3 ms	14.94×

Results depend on configuration.

Pull requests

• #439 — Faster calendar rendering and reproducible benchmarks
• #440 — Updated tooling, builds, tests, CI and development site
• #441 — Optional calendar features and styles

Release v3.3.2

What's Changed

• build(deps): bump cypress-io/github-action from 7.4.1 to 7.4.3 in the github-actions group by @dependabot[bot] in #434
• fix: prevent input popup scrollbar flicker by @uvarov-frontend in #435

Full Changelog: v3.3.1...v3.3.2

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 animation option, off by default. Arrows and year paging slide, view switches cross-fade, folding has a curve of its own. Tune duration and easing globally or per group — slide, fade, collapse. prefers-reduced-motion is honoured without asking.
• A week at a time. type: 'week' renders a single week and steps week by week; context.displayWeekDate tells you which one is on screen.
• Swipe navigation. enableSwipe pages 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. enableCollapse folds 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 inputMode popup leaves the accessibility tree entirely. Checked against axe-core, Pa11y, IBM Equal Access and html-validate.
• Partial aria labels. labels.arrowNext and labels.arrowPrev accept 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", or role="dialog" in inputMode; tabindex 0 → -1
• aria-selected moved from the date button onto its [data-vc-date] gridcell
• week numbers render as <b> unless onClickWeekNumber is set
• with onClickWeekDay, the weekday header wraps a button — new styles.weekDayBtn key
• the date grid keeps one tab stop, so Tab no longer walks every date
• time fields are plain <div> wrappers now, and the sliders no longer carry a name
• role="toolbar" → role="group" in headers, role="region" → role="group" on multiple columns
• the weekday row is 24px tall to meet the WCAG target size, making calendars ~6px taller
• layouts gained a week key
• enableCollapse pairs with default and week only

PRs

• #430 feat: add animated transitions between calendar views
• #431 feat: add week calendar type with collapse and swipe gestures
• #432 fix(a11y): improve calendar accessibility and demo semantics

Release v3.2.0

Highlights

• Added support for initializing calendars inside a Shadow DOM.
• Exposed built-in theme colors as CSS custom properties.
• Added date-range keys for popups, so one popup can apply to an entire range.
• Improved accessibility for date, month, and year views.
• Fixed ISO week numbers, date handling across time zones, input cleanup, and initial disabled-date behavior.

PRs

• #399 Add Dependabot configuration for GitHub Actions
• #400 demo: Change language attribute from en to ru
• #401 build(deps): bump the github-actions group with 2 updates
• #404 build(deps): bump the github-actions group with 2 updates
• #410 fix: improve ARIA grid structure for Month and Year views
• #416 build(deps): bump actions/checkout from 6 to 7 in the github-actions group
• #419 fix: reset displayDateMin/displayDateMax via null in .set()
• #420 fix: use local date components instead of UTC ISO string for Date input
• #421 fix: don't remove original input when destroying calendar before it was ever opened
• #422 fix: correct off-by-one in ISO week number calculation
• #423 docs: document monthsToSwitch's effect on month-picker selectable months
• #424 fix: apply disableDatesGaps to pre-selected selectedDates on init
• #425 fix: resolve axe-core ARIA violations
• #426 feat: support date-range keys in popups
• #427 feat: expose theme colors as CSS custom properties
• #428 feat: support initializing calendars inside a Shadow DOM

Credits

Thank you to @coliff and @fro9-dev for your contributions.

Release v3.1.0

PR

#382 Add docs cross reference to enableJumpToSelectedDate
#383 Feature/ISSUE-380 Open on focus enhancement
#388 ISSUE-386/ISSUE-387 - Add additional aria-roles for accessibility
#390 docs: add zh locale translation
#394 Update controls removeChild call to remove()
#395 Add ko lang
#396 Fix positionToInput property has the wrong type
#397 Fix inputMode true and TAB key and arrow navigation
#398 Remove DocumentFragment

Credits

Thank you so much @johanrd, @Juljus777, @rickdoesburg, @cherrol, @martejj, @ghiscoding for your contributions!

Release v3.0.5

PR

#373 fix: allow onHover logic for dates to work with Web components
#375 fix: use setTimeout for cross-compatibility
#378 fix: Add displayClosestValidDate

Credits

Huge thanks to @ghiscoding and @iI-RayDay-Ii for helping!

Release v3.0.4

#354 Replace unused ko-fi funding donate button
#368 Refactoring/363 input show and hide

Release v3.0.3

#351 Fix display of data-vc-date-selected and data-vc-date-hover attributes
#352 Fix color scheme styles

Release v3.0.2

#345 Fix day of week buttons
#346 Fix set method for input
#348 Fix navigation by month
#349 Fix empty list of years with enableJumpToSelectedDate

Release v3.0.1

Fix popups #337