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.

The disabled prop takes a react-day-picker matcher and Drivn passes it straight through — a single Date, an array of them, a { from, to } range object, or a predicate shaped (date: Date) => boolean. Disabled days stop responding to clicks and render at text-muted-foreground/30 with a not-allowed cursor, which comes from the disabled key in the component's styles.classNames map. Nothing is translated on the way in, so any matcher from the react-day-picker docs works here verbatim.

The predicate form covers most real cases. Blocking past dates in a booking flow is (day) => day < today against a midnight-normalized reference — that is what the snippet below does, and without the setHours call today itself would be disabled for most of the day. Blocking weekends in a workday scheduler is (day) => [0, 6].includes(day.getDay()). Matchers run per rendered day and the grid only ever draws six weeks, so a dynamic cutoff costs nothing measurable. Pair the picker with an Input when the same form also needs a typed fallback.