Interactive examples of the calendar package. Each section documents a different option combination.
Default mode (mode="single"). Past dates are disabled. Use the lang picker above to switch locale and week start.
deselect on the root. Click the selected day again to clear it. French chrome labels (locale still follows the picker).
mode="range". 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).
allow-past on the root. Days before today become selectable (range mode).
Initial view via data-year / data-month, selection via data-picked (JSON YYYY-MM-DD days).
mode="multiple". Toggle days on and off. Click a selected day again to remove it.
Override renderInner to wrap each day in <time>,
paint dots on days with events, and disable days without events.
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.