Ravox KitForms
Calendar
A month grid with the start of the week and names coming from Intl, in the user's language, with no date library. One day, a range (with a hover preview) or several days; locked dates, minimum and maximum, two months side by side and quick month and year switching from the title.
| dom | seg | ter | qua | qui | sex | sáb |
|---|---|---|---|---|---|---|
Outubro 2026
Settings
Toggles
Examples
Schedule with locked days
| dom | seg | ter | qua | qui | sex | sáb |
|---|---|---|---|---|---|---|
Riscados: domingo ou agenda lotada.
Outubro 2026
Booking by period
| dom | seg | ter | qua | qui | sex | sáb |
|---|---|---|---|---|---|---|
8 de out. – 11 de out.3 noites · R$ 1.020
Outubro 2026
Several days, week starting on Monday
| seg | ter | qua | qui | sex | sáb | dom |
|---|---|---|---|---|---|---|
2 de 5 plantões escolhidos
Outubro 2026
Installation
The command creates components/ui/calendar.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add calendarProps
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "range" | "multiple" | "single" | What is selected: one day, a start and end, or several loose days. |
| value / defaultValue | Date | null · { from?, to? } · Date[] | — | Controlled or initial value, in the format of the mode. |
| onValueChange | (value) => void | — | Receives the day, the range or the list of days. In range mode, it is called on the first click (start only) and on the second. |
| min · max | Date | — | First and last possible day. The arrows and the month/year switch respect both. |
| isDateDisabled | (date: Date) => boolean | — | Locks specific days (Sundays, holidays, a fully booked calendar). They remain reachable with the keyboard. |
| maxDays | number | — | With mode="multiple": the maximum number of days. |
| numberOfMonths | 1 | 2 | 1 | Months side by side (on mobile, one below the other). |
| month · defaultMonth · onMonthChange | Date · Date · (month: Date) => void | — | The month on display, controlled or initial (default: the value's month, or today's). |
| weekStartsOn | 0 a 6 | o do locale | Day the week starts on: 0 = Sunday, 1 = Monday. Without the prop, it comes from Intl (Sunday in pt-BR and en-US, Monday in most other locales). |
| locale | string | idioma do navegador | Language for month and day names, the start of the week and the texts (built in for en and pt; other languages use en). On the server it renders in en-US and switches to the browser's right after hydration. |
| showOutsideDays | boolean | true | Shows the days of neighboring months that fill out the grid, dimmed. |
| autoFocus | boolean | false | Puts focus on the selected day (or today) when it appears. |
| footer | ReactNode | — | Something below the grid: a summary, a "Clear" button. |
| ...props | ComponentProps<"div"> | — | Go to the outer block (className, aria-label…). |