Components
MultiViewCalendar
Inline calendar showing multiple months side by side for single-date or range selection.
MultiViewCalendar renders several months side by side directly in the page —
unlike DatePicker, there is no popover. Reach
for it in range dashboards, booking flows, and availability views. It is
controlled, and mode switches between 'single' (value is a Date) and
'range' (value is a DateRange); set months for how many months to show
(defaults to 2).
Example
Preview
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
September 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
import { MultiViewCalendar } from '@officina/ui';
import { useState } from 'react';
function AvailabilityCalendar() {
const [date, setDate] = useState<Date | undefined>(new Date());
return <MultiViewCalendar months={2} value={date} onChange={setDate} />;
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| onChange* | ((date: Date | undefined) => void) | ((range: DateRange | undefined) => void) | — | Called with the newly selected date. Called with the newly selected range. |
| value* | Date | DateRange | undefined | — | Selected date, or `undefined` when empty (controlled). Selected start/end range, or `undefined` when empty (controlled). |
| mode | enum | — | Single-date selection mode (default). Date-range selection mode. |
| months | number | — | Number of months rendered side by side. Defaults to `2`. |