Calendar

Calendar shows a monthly grid of days to pick a single date, several dates or a date range.

Built on react-day-picker v10 with a Fluent look: 32px day cells with a 4px radius, today in bold brand text with an underline, selected days on a brand background, days inside a range tinted with brand-background-2. Defaults to Vietnamese, with weeks starting on Monday. Accepts every DayPicker prop (mode, selected, onSelect, disabled, numberOfMonths…).

November 2026

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { Calendar } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

November 2026

Range selection

mode="range": the first and last days get a brand background, the days between a brand tint.

November 2026

Workdays selected: 0

Multiple days & disabled days

mode="multiple"; disabled={{ dayOfWeek: [0, 6] }} disables weekends.

Usage

Use Calendar on its own when the calendar is the main content (booking, picking time off).
Disable invalid days with disabled instead of reporting an error after the pick.

Don't

Don't use Calendar for birth dates far from today. Allow typing or use a year dropdown (captionLayout="dropdown").
Don't show more than 2 months side by side on narrow screens.

Props

Prop · Type	Default	Description
mode"single" \| "multiple" \| "range"	Default: —	Selection mode.
selected / onSelectDate \| Date[] \| DateRange	Default: —	Value, depending on mode.
requiredboolean	Default: false	Clicking the selected day again keeps it selected.
min / maxnumber	Default: —	Fewest / most days (multiple), nights (range).
disabled / hiddenCalendarMatcher \| CalendarMatcher[]	Default: —	Disabled / hidden days: Date, Date[], DateRange, { before }, { after }, { dayOfWeek }, a (date) => boolean function.
modifiers / modifiersClassNamesRecord<string, CalendarMatcher> / Record<string, string>	Default: —	Named day groups and a class per group, e.g. { booked: [...] } and { booked: "line-through" }.
month / defaultMonth / onMonthChangeDate / Date / (month: Date) => void	Default: —	The month shown.
startMonth / endMonthDate	Default: —	Limits of month navigation.
numberOfMonthsnumber	Default: 1	Number of months shown.
captionLayout"label" \| "dropdown" \| "dropdown-months" \| "dropdown-years"	Default: "label"	Month title or month / year dropdowns.
showOutsideDaysboolean	Default: true	Shows days of the previous / next month (foreground-4).
weekStartsOn0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6	Default: —	First day of the week (0 = Sunday); defaults to the locale's.
localeCalendarLocale	Default: —	A date-fns locale, imported from react-day-picker/locale; defaults to messages.calendar.locale.
timeZonestring	Default: —	IANA time zone, e.g. "Asia/Ho_Chi_Minh".
excludeDisabled / resetOnSelectboolean	Default: —	range: never span a disabled day / a click after a complete range starts a new one.
navLayout / hideNavigation / disableNavigation / pagedNavigation / reverseMonths / reverseYears"around" \| "after" / boolean	Default: —	Where the month navigation buttons go and how they behave.
fixedWeeks / showWeekNumber / ISOWeek / firstWeekContainsDate / hideWeekdays / todayboolean / 1 \| 4 / Date	Default: —	Day grid: always six weeks, week numbers, ISO weeks, first week of the year, hidden weekday names, the day marked as today.
autoFocus / footer / dir / role / id / title / langboolean / ReactNode / string	Default: —	Focus on mount, calendar footer, reading direction and HTML attributes.
classNames / components / formatters / labelsreact-day-picker	Default: —	Deprecated: react-day-picker props, still forwarded with a development warning, removed in 1.0 (#371).

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.calendar

Key · Type	Default (English)	messagesVi
localeCalendarLocale \| undefined Locale của react-day-picker: tên tháng / thứ, nhãn trợ năng của nút và ô ngày, ngày đầu tuần. Prop `locale` của Calendar vẫn ưu tiên hơn. `undefined` dùng locale en-US có sẵn trong react-day-picker.	Default (English)`undefined`	messagesVi`vi`