Calendar
A calendar component for date selection with support for holidays, disabled dates, and multiple languages. Matches the exact Figma design for easy integration.
Installation
The Calendar component is part of the design system. Import it from the UI package.
import { Calendar } from "@/components/ui/calendar"Usage
February
2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Examples
Controlled Calendar
April
2024
Sun
Mon
Tue
Wed
Thu
Fri
Sat
With Disabled Dates
February
2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
With Holidays
February
2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Language Support
2월
2026
일
월
화
수
목
금
토
February
2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Date Range Restrictions
February
2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Custom Disabled Logic
February
2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Complete Example
February
2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Calendar Search Components
Styling Reference
The calendar component uses exact styling from the Figma design. Here are the key styling values for reference:
/* Calendar Styling Reference */
/* Month Navigation */
/* - Month name: 20px font, 28px line-height, -0.4px tracking, bold, #141519 */
/* - Year: 14px font, 20px line-height, -0.56px tracking, medium, #545766 */
/* - Navigation buttons: 44px × 44px, hover bg rgba(0,0,0,0.03) */
/* - Chevron icons: 20px, #6b6f80 */
/* Day Headers */
/* - Sunday: 12px font, 18px line-height, 0.06px tracking, bold, #e62e2e (red) */
/* - Other days: 12px font, 18px line-height, 0.06px tracking, bold, #141519 */
/* - Header height: 48px, border-bottom: rgba(0,0,0,0.03) */
/* Date Cells */
/* - Cell size: min 36px × 36px, padding: 6px vertical */
/* - Date number: 24px × 24px circle, 12px font, 18px line-height, 0.192px tracking, semibold */
/* - Gap between cells: 4px */
/* Date States */
/* - Default: text #141519 */
/* - Today: bg #174fdf, text #f6f7f9 (white) */
/* - Selected: bg #174fdf, text #f6f7f9 (white) */
/* - Hover: bg rgba(0,0,0,0.03) */
/* - Disabled: text #bbbfcc */
/* - Holiday: text #c00 (red) */
/* - Holiday disabled: text #bbbfcc */
/* Holiday Label */
/* - 10px font, 16px line-height, 0.16px tracking, medium, #c00 */
/* - Height: 14px, padding: 4px horizontal */API Reference
The Calendar component displays a date picker with mode, selected, onSelect, disabled dates, and locale. See the interface below for full prop details.
interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
/**
* Currently selected date
*/
value?: Date
/**
* Default date to show (defaults to today)
*/
defaultDate?: Date
/**
* Callback when a date is selected
*/
onDateSelect?: (date: Date) => void
/**
* Callback when month changes
*/
onMonthChange?: (date: Date) => void
/**
* Array of dates that should be disabled
*/
disabledDates?: Date[]
/**
* Array of dates that are holidays
*/
holidays?: Date[]
/**
* Function to check if a date is disabled
*/
isDateDisabled?: (date: Date) => boolean
/**
* Function to check if a date is a holiday
*/
isDateHoliday?: (date: Date) => boolean
/**
* Language for month and day names ("eng" | "kor")
*/
language?: "eng" | "kor"
/**
* Minimum selectable date
*/
minDate?: Date
/**
* Maximum selectable date
*/
maxDate?: Date
}
interface CalendarDate {
date: Date
isCurrentMonth: boolean
isToday: boolean
isSelected: boolean
isDisabled?: boolean
isHoliday?: boolean
}