Calendar
Calendário mensal para seleção de datas. Suporta modos single, multiple e range.
Demonstração
Single
July 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Range
July 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
mode | "single" | "multiple" | "range" | "single" | Modo de seleção: single, multiple ou range |
selected | Date | Date[] | DateRange | — | Data(s) selecionada(s) |
onSelect | (date) => void | — | Callback quando a seleção muda |
disabled | Date | Date[] | Matcher | — | Data(s) desabilitada(s) ou função matcher |
showOutsideDays | boolean | true | Exibe dias dos meses adjacentes |
Uso
import { Calendar } from '@ghiberti85/ui'
// Single date
const [date, setDate] = useState<Date | undefined>()
<Calendar mode="single" selected={date} onSelect={setDate} />
// Date range
const [range, setRange] = useState<{ from?: Date; to?: Date }>()
<Calendar mode="range" selected={range} onSelect={setRange} />
// Multiple dates
const [dates, setDates] = useState<Date[]>()
<Calendar mode="multiple" selected={dates} onSelect={setDates} />
// Disable weekends
<Calendar mode="single" disabled={{ dayOfWeek: [0, 6] }} />