Calendar

A date-grid calendar built on react-day-picker, with a calendarType prop that switches between the Jalali (Shamsi) and Gregorian (Miladi) calendars.

Last updated August 12, 2026

CreditsModifiedPublished

Copied from shadcn/ui and coss/ui.

Adds a calendarType prop ("shamsi" | "miladi") that switches between @daypicker/persian (faIR locale, RTL, Persian numerals) and react-day-picker (enUS locale, LTR, Latin numerals), defaulting to "shamsi"
Replaces pr-/pl- and rounded-l-/rounded-r- with pe-/ps- and rounded-e-/rounded-s- (logical properties) throughout

Overview

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/calendar.json

Usage

import { Calendar } from "@/components/ui/calendar"
 
export function Example() {
  const [date, setDate] = React.useState<Date | undefined>()
 
  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-lg border"
    />
  )
}

Examples

Calendar Type

Set calendarType to switch between the Jalali (Shamsi, the default) and Gregorian (Miladi) calendars. Shamsi renders via @daypicker/persian with the faIR locale, RTL direction, and Persian numerals; Miladi renders via react-day-picker with the enUS locale, LTR direction, and Latin numerals.

Range Calendar

Use mode="range" with a controlled selected value and onSelect. One responsive calendar handles both endpoints.

Use captionLayout="dropdown".

Presets

A calendar with a scrollable preset sidebar on desktop and a compact Drawer trigger above the month on smaller screens.

Booked Dates

Combine disabled with a booked modifier to strike through unavailable dates.

Week Numbers

Use showWeekNumber to display the ISO week number.

Holidays

Pass showHolidays to highlight Iranian holidays (red text) for the visible month, using persian-holidays internally. Hover a holiday to see its title and whether it's an official day off or just a commemorative occasion.

RTL

The Shamsi calendar (the default) is already RTL, with the faIR locale and Persian numerals. Override locale and dir directly if you need a different locale in an RTL layout.

Date Picker

Calendar is the day-grid building block. A Date Picker page, composing it with Popover for a compact single-field input (presets, range picker, reservation form), is coming soon.

API Reference

Calendar

Prop	Type	Default	Description
calendarType	"shamsi" \| "miladi"	"shamsi"	Switches between the Jalali (Shamsi, via @daypicker/persian, faIR locale + RTL + Persian numerals) and Gregorian (Miladi, via react-day-picker, enUS locale + LTR + Latin numerals) calendars.
mode	"single" \| "multiple" \| "range"	—	The selection mode of the calendar.
selected	Date \| Date[] \| DateRange \| undefined	—	The selected date(s), shaped according to mode. Pair with onSelect for a controlled calendar.
onSelect	(value) => void	—	Called with the new selection whenever it changes.
month	Date	—	The month displayed in the calendar (controlled).
onMonthChange	(month: Date) => void	—	Called when the displayed month changes.
defaultMonth	Date	—	The initial month to show. Pass this explicitly (e.g. a Date computed after mount) instead of relying on the internal default, to avoid reading the current date during render.
captionLayout	"label" \| "dropdown" \| "dropdown-months" \| "dropdown-years"	"label"	Renders the month caption as plain text or as dropdowns.
buttonVariant	Button variant	"ghost"	The variant used for the previous/next navigation buttons.
showOutsideDays	boolean	true	Shows days outside the current month.
fixedWeeks	boolean	true	Always renders six week rows, filling them with adjacent-month days so the Calendar height never changes.
showHolidays	boolean	false	Highlights Iranian holidays for the visible month, using persian-holidays internally: official days off are red, commemorative-only days are blue (red wins if a day has both). A hover tooltip shows each holiday's title and type.
showWeekNumber	boolean	false	Shows a column with the ISO week number.
numberOfMonths	number	1	The number of months to render side by side.
disabled	Matcher \| Matcher[]	—	Dates that cannot be selected.
modifiers	Record<string, Matcher \| Matcher[]>	—	Custom named day matchers, paired with modifiersClassNames/modifiersStyles.
modifiersClassNames	Record<string, string>	—	Class names applied to days matching each modifier.
locale	DayPickerLocale	faIR ("shamsi") / enUS ("miladi")	Overrides the locale used for month/weekday names.
dir	"ltr" \| "rtl"	"rtl" ("shamsi") / "ltr" ("miladi")	Overrides the calendar's text direction.
numerals	"latn" \| "arabext" \| ...	"arabext" ("shamsi") / "latn" ("miladi")	Overrides the numeral system used to format day numbers.
className	string	—	Class name applied to the root element.
classNames	Partial<ClassNames>	—	Overrides individual react-day-picker element class names.

For the complete underlying prop reference (matchers, formatters, labels), see the react-day-picker documentation.

Edit this page on GitHub

PreviousButton Group NextCard

Calendar

Overview

Installation

Usage

Examples

Calendar Type

Range Calendar

Month and Year Selector

Presets

Booked Dates

Week Numbers

Holidays

RTL

Date Picker

API Reference

Calendar