BbCalendar

Which end the time rail edits in range + type="datetime" (v-model:active-segment). Standalone use manages this internally; an embedding host (the date input) drives it from its focused field. Ignored outside range + datetime.

12-hour display with an AM/PM column (requires type="datetime"); emits stay 24h.

Disables every cell, the navigation and the time rail.

First day of the week (0 = Sunday … 6 = Saturday). Omitted, the active locale's week start: Monday for it, de, fr, en-gb…, Sunday for bare en (US) and pt (Brazil).

Emit plain calendar strings instead of zoned ISO instants. Implied (and forced) by type="month" and type="year".

For delivery days, stays and report filters: a calendar day that must read the same in every timezone.

Maximum selectable value, in this type's shape. A finer bound is accepted and ceiled to the unit, with a warning. With datetime, on its own day the time rail disables the times after it.

Minimum selectable value in this type's shape (YYYY-MM-DD; YYYY-MM-DDTHH:mm with datetime, YYYY-MM with month, YYYY with year). A finer bound is floored to the unit, with a warning. With datetime the rail also disables the earlier times on its day.

An empty calendar whose window lies entirely after today opens on this month instead of on a disabled grid.

v-model: null when empty, a string, a [start, end] pair with range, or a sorted array with multiple. The string is YYYY-MM-DD when floating (YYYY-MM / YYYY for month / year), otherwise a zoned ISO instant (carrying the time under datetime).

Multi-selection: each pick toggles a value in a sorted array (days, months or years). Needs an array modelValue ([] when empty, never null). Throws with range or type="datetime".

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: arrow, cellColumnHeader, day, dayButton, header, item, month, monthItem, root, year, yearItem. States: active, disabled, highlighted, inRange, outside, rangeEnd, rangeStart, selected, today.

pt:root="[--cell:36px]" resizes the whole grid. Restyle the mark on pt:day-button; a background on pt:day fills the cell square. In the page, raise --cell on phones yourself: only the picker sheet enlarges its days.

Enables range selection ([start, end]).

Keep the model an array, with [] as the empty state.

Shows the calendar and lets the user page through it, but no pick changes the value.

For a confirmed choice that stays on screen. Paging through months still works.

Adds the seconds column (requires type="datetime").

Predicate invoked per candidate; return false to disable it. Receives the value in this type's shape — YYYY-MM under month, YYYY under year.

For rules a window cannot express, such as weekends or closures. Refused days are already disabled and announced; add no click guard of your own.

Minute-column granularity and arrow stepping (requires type="datetime").

Companion time model (v-model:time), 24-hour HH:mm / HH:mm:ss. With floating it is the only carrier of the time; otherwise it mirrors the time inside modelValue. Requires type="datetime".

What the calendar selects and emits: date (a day), datetime (a day plus a time rail), month (YYYY-MM) or year (YYYY). month / year force floating, ignore utc, and leave the time props inert.

Emit UTC (...Z) instead of the local offset. Ignored with floating, and therefore with type="month"/type="year".

Empty, the calendar opens on today's month, or the nearest month inside min and max; a prerendered page moves to the reader's month after hydration, so seed it when the opening month matters. Inside a BbForm it is not submitted unless you bind it with useBbFormField.

With floating it is the only place the time is kept, so bind it. The model is 24-hour whatever ampm displays.

Relay of the raw grid pick, before this component combines it with the time. An embedding host binds this to run its own value engine (the date picker closes on it once the selection is complete); clean consumers ignore it and use update:modelValue.

Relay of the raw time-rail pick. An embedding host binds this to run its own value engine; clean consumers ignore it and use update:time.

The active range end changed (range + type="datetime" only).

Emitted when the selected value changes: a string (single), [start, end] (range), a sorted array (multiple). Empty is null for a single value and [] for a range or multiple, never null.

Companion time model, alongside every change while type="datetime".

One date's button label (e.g. #2024-03-15: the local YYYY-MM-DD, which slotKey leaves as it is); beats day. Day grid only.

Named after the local date exactly as written: #2026-12-25. It replaces the day number on that date only.

Content under one date's cell; beats day:append.

Named after the local date exactly as written: #append:2026-12-25. It wins over append:day on that date.

Replaces the day button label inside each calendar day.

Replaces every day's number, for a price or a symbol in its place.

Appends content below each calendar day.

Look the day up from item (a dayjs object) and skip outside days. Every week takes the height of the tallest decorated week.