Calendar
Calendar
Una griglia calendario react-day-picker v10, restilizzata per abbinarsi al kit — data singola, un intervallo, o multiple. La base per DatePicker, DateRangePicker e DateTimePicker, che la avvolgono ciascuno in un trigger + popover.
import { Calendar } from "@pompeitech/vesuvius-ui";Data singola
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Navigazione a dropdown mese/anno
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Intervallo
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
API
Calendar accetta ogni prop che accetta il DayPicker di react-day-picker, più un'aggiunta:
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
buttonVariant | "ghost" | "outline" | "ghost" | Stile dei pulsanti di navigazione mese prec/succ e, con captionLayout="dropdown", dei trigger dei dropdown mese/anno. |
Le prop di DayPicker più comunemente usate:
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
mode | "single" | "range" | "multiple" | Modalità di selezione — cambia la forma attesa da selected/onSelect. | |
selected | Date (single) / DateRange (range) / Date[] (multiple) | La forma dipende da mode. | |
onSelect | corrisponde alla forma di selected | ||
numberOfMonths | number | 1 | Quanti mesi vengono renderizzati affiancati. |
captionLayout | "label" | "dropdown" | "label" | "label" mostra un semplice testo "Mese Anno"; "dropdown" lo sostituisce con due dropdown simili a Select, delimitati da startMonth/endMonth. |
startMonth / endMonth | Date | Limiti per la navigazione e per l'elenco anni di captionLayout="dropdown". | |
showOutsideDays | boolean | true | Mostra i giorni iniziali/finali dei mesi adiacenti, attenuati. |
disabled | Date | Date[] | DateRange | Matcher | Matcher[] | Date che non possono essere selezionate. | |
min / max | number | Per mode="range": numero minimo/massimo di giorni che l'intervallo deve coprire. |
Vedi la documentazione di react-day-picker per il riferimento completo — ogni prop che accetta (formatter, modifier, locale, numeri di settimana, e altro) passa direttamente attraverso.
Accessibilità
Costruito sulla propria implementazione role="grid" di react-day-picker — le frecce spostano il focus di un giorno, PageUp/PageDown saltano di un mese, Home/End saltano all'inizio/fine della settimana, e Invio/Spazio seleziona il giorno a fuoco. Il giorno corrente e quello/i selezionato/i vengono annunciati automaticamente tramite aria-current/aria-selected.