Calendar
Individual day cell button within the Calendar
Usage
tsx
import { Calendar, CalendarDayButton } from '@tryvienna/ui'
<Calendar
mode="single"
selected={date}
onSelect={setDate}
captionLayout="dropdown"
fromYear={2020}
toYear={2030}
/>Examples
Default
tsx
<Calendar
mode="single"
selected={date}
onSelect={setDate}
captionLayout="dropdown"
fromYear={2020}
toYear={2030}
/>Range
tsx
<Calendar
mode="single"
selected={date}
onSelect={setDate}
captionLayout="dropdown"
fromYear={2020}
toYear={2030}
/>Dropdown
tsx
<Calendar
mode="single"
selected={date}
onSelect={setDate}
captionLayout="dropdown"
fromYear={2020}
toYear={2030}
/>API Reference
Calendar
| Prop | Type | Default | Description |
|---|---|---|---|
classNames | (Partial<ClassNames> & Partial<DeprecatedUI<string>>) | undefined | - | |
showOutsideDays | boolean | true | |
captionLayout | "label" | "dropdown" | "dropdown-months" | "dropdown-years" | label | |
buttonVariant | "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | ghost | |
formatters | Partial<Formatters> | undefined | - | |
components | Partial<CustomComponents> | undefined | - |
Also accepts all props from DayPicker.
CalendarDayButton
CalendarDayButton — Individual day cell button within the Calendar
| Prop | Type | Default | Description |
|---|---|---|---|
day | CalendarDay | - | |
modifiers | Modifiers | - |
Also accepts all props from DayButton.
Data Attributes
| Component | data-slot |
|---|---|
Calendar | "calendar" |
CalendarDayButton | "calendar-day-button" |