You selected: Thu Apr 24 2025

Calendar Component

A highly customizable calendar component based on react-day-picker with advanced date selection capabilities.

Installation

The Calendar component is part of our UI library. You can import it directly from the components directory.

Here is how to use the calendar in your project.

React TSX
1import { Calendar } from "@/components/modern-ui/calendar"

React TSX
1<Calendar mode="single" />

Prop	Type	Default	Description
`mode`	`"single" \| "multiple" \| "range" \| "custom"`	`"single"`	Selection mode of the calendar
`selected`	`Date \| Date[] \| DateRange \| undefined`	`undefined`	Currently selected date(s)
`onSelect`	`(date: Date \| Date[] \| DateRange \| undefined) => void`	`undefined`	Handler called when date(s) are selected
`defaultMonth`	`Date`	Current month	The default month to display
`initialView`	`"days" \| "months" \| "years"`	`"days"`	The initial view to display when calendar opens
`showOutsideDays`	`boolean`	`true`	Whether to show days from previous/next months
`showYearSwitcher`	`boolean`	`true`	Whether to show the year switcher in the caption
`yearRange`	`number`	`12`	Number of years to display in the year view
`numberOfMonths`	`number`	`1`	Number of months to display at once
`disabled`	`Date[] \| ((date: Date) => boolean)`	`undefined`	Dates to disable or a function to determine if a date should be disabled
`fromDate`	`Date`	`undefined`	Minimum date that can be selected
`toDate`	`Date`	`undefined`	Maximum date that can be selected

Prop	Type	Description
`onMonthSelect`	`(date: Date) => void`	Handler called when a month is selected
`onQuarterSelect`	`(date: Date) => void`	Handler called when a quarter is selected
`onYearSelect`	`(date: Date) => void`	Handler called when a year is selected
`onDayClick`	`(date: Date, modifiers: DayModifiers, e: MouseEvent) => void`	Handler called when a day is clicked
`onMonthChange`	`(month: Date) => void`	Handler called when the month changes

The Calendar component provides extensive styling options through className props:

Prop	Description
`className`	The main Calendar container class
`monthsClassName`	The months container class
`monthCaptionClassName`	The month caption class
`weekdaysClassName`	The weekdays container class
`weekdayClassName`	The weekday class
`monthClassName`	The month class
`captionClassName`	The caption class
`captionLabelClassName`	The caption label class
`buttonNextClassName`	The next button class
`buttonPreviousClassName`	The previous button class
`navClassName`	The navigation class
`monthGridClassName`	The month grid class
`weekClassName`	The week class
`dayClassName`	The day class
`dayButtonClassName`	The day button class
`rangeStartClassName`	The range start day class
`rangeEndClassName`	The range end day class
`selectedClassName`	The selected day class
`todayClassName`	The today day class
`outsideClassName`	The outside day class
`disabledClassName`	The disabled day class
`rangeMiddleClassName`	The middle day in a range class
`hiddenClassName`	The hidden day class