React Calendar Component Examples

The default Calendar variant renders a month grid with the current month's days, navigated via left and right chevrons in the caption. Pass selected as a Date | undefined and onSelect as the setter — react-day-picker handles the day clicks and calls back with the clicked date or undefined when the user clicks the same day twice (the deselect gesture).

Because the Calendar source lives in your repo after install, adding custom styling or an extra disabled day is a local edit rather than a theme override. The snippet below is the minimum viable integration: a controlled useState<Date | undefined> bound to the component, with no wrapper div or extra state.

The variant prop switches between three visual shapes without changing any other behavior. variant="weekNumbers" adds an ISO week number column on the left, which payroll, invoicing, and scheduling tools often require. variant="dropdown" replaces the month/year caption with native select elements bounded by fromYear and toYear, which is the right default for birthday pickers, deadline inputs far from today, or any case where the user must jump across years without clicking through twelve months.

Both variants share the same selected, onSelect, and disabled props — you swap variant and nothing else changes. Under the hood, Drivn forwards showWeekNumber: true or captionLayout: 'dropdown' to react-day-picker, plus a few extra classNames that restyle the caption.

Calendar.Range is a compound child on the same root component — same import, same selected / onSelect contract, different type. selected is DateRange | undefined where DateRange = { from: Date; to?: Date } (Drivn re-exports the type from react-day-picker). The first click sets from; the second click sets to. Clicking a day outside the current range resets it and starts a new one.

The styling for mid-range days uses the bg-accent token so the highlight tracks your theme. When the range is a single day (from === to), Drivn skips the range styling so the calendar does not render a half-pill. For a range picker that opens from a trigger button instead of rendering inline, see DatePicker.Range.

Drivn re-exports the Locale type from react-day-picker, and you can pass any locale object to the locale prop. Weekday headers, month names, and the first day of the week all update — a Czech locale shifts the grid to start on Monday and renders "Led / Úno / Bře" at the top. No additional configuration is needed; Drivn forwards the locale object directly into DayPicker.

This means your i18n setup is the same one you already use for dates elsewhere in the app. Import a locale from react-day-picker/locale — dozens are pre-built — and pass it in. If your translation layer already knows what locale is active, wire it through a React context and the Calendar picks it up automatically. For tokens that affect the grid appearance, see theming.

Pass a disabled prop with a matcher — a single Date, an array of dates, a { from, to } range, or a predicate (date: Date) => boolean — and those days become unclickable and render in a dimmer muted color. This is the same matcher API as react-day-picker, so anything that works in its docs works here without translation.

A common pattern: disable past dates in a booking picker, or disable weekends in a workday scheduler. The predicate form is the most flexible — pass (day) => day < today to block past dates, or (day) => [0, 6].includes(day.getDay()) to block weekends. Because the matcher is evaluated per day, there is no performance cost to checking against a dynamic cutoff.