Interactive examples of the calendar package. Each section documents a different option combination.
Default mode (single: true). Past dates are disabled. Use the lang picker above to switch locale and week start.
deselect: true — click the selected day again to clear it. French chrome labels (locale still follows the picker).
single: false — pick a start and an end. Hover highlights the range between the two clicks.
Navigation controls are optional — only the grid is required (.js-body + .js-days).
allowPast: true — days before today become selectable (range mode).
Initial view via data-year / data-month, selection via data-picked-dates (JSON YYYY-MM-DD days).
You own the chrome and the cell HTML. Only the hooks matter
(.js-previous, .js-title, .js-next,
.js-body, .js-days, .js-day).
This demo swaps Bootstrap for a custom header, stateClasses, and a renderInner that rebuilds each day cell.