달력

달력은 날짜와 관련된 정보와 기능을 제공하는 데 사용한다.

사용 지침

신청 마감일·예약일 지정 등 정확한 날짜 선택이 필요한 폼에서 사용하고, 키보드 화살표 이동·선택 불가일 비활성화·범위 선택을 함께 지원해 접근성을 확보합니다.

예제

Default

2024년 12월

examples/calendar/CalendarDefault.tsx

import { Calendar } from "@/components/ui/dynamic/calendar"

export default function CalendarDefault() {

Single

2024년 12월

examples/calendar/CalendarSingle.tsx

import { Calendar } from "@/components/ui/dynamic/calendar"

export default function CalendarSingle() {

Range

2024년 12월

examples/calendar/CalendarRange.tsx

import { Calendar } from "@/components/ui/dynamic/calendar"

export default function CalendarRange() {

Controlled

2024년 3월

선택된 날짜: 2024.03.15

examples/calendar/CalendarControlled.tsx

"use client"

import * as React from "react"

Controlled Range

2026년 7월

examples/calendar/CalendarControlledRange.tsx

"use client"

import * as React from "react"

Bottom Position

2024년 12월

examples/calendar/CalendarBottomPosition.tsx

import { Calendar } from "@/components/ui/dynamic/calendar"

export default function CalendarBottomPosition() {

Top Position

2024년 12월

examples/calendar/CalendarTopPosition.tsx

import { Calendar } from "@/components/ui/dynamic/calendar"

export default function CalendarTopPosition() {

Open State

달력이 열린 상태를 시연합니다.

2024년 3월

examples/calendar/CalendarOpenState.tsx

"use client"

import * as React from "react"

Read Only

2024년 12월

examples/calendar/CalendarReadOnly.tsx

import { Calendar } from "@/components/ui/dynamic/calendar"

export default function CalendarReadOnly() {

Disabled

2024년 12월

examples/calendar/CalendarDisabled.tsx

import { Calendar } from "@/components/ui/dynamic/calendar"

export default function CalendarDisabled() {

Custom Button Text

2024년 12월

examples/calendar/CalendarCustomButtonText.tsx

import { Calendar } from "@/components/ui/dynamic/calendar"

export default function CalendarCustomButtonText() {

With Default Value

2024년 12월

examples/calendar/CalendarWithDefaultValue.tsx

import { Calendar } from "@/components/ui/dynamic/calendar"

export default function CalendarWithDefaultValue() {

With Default Range

2024년 12월

examples/calendar/CalendarWithDefaultRange.tsx

import { Calendar } from "@/components/ui/dynamic/calendar"

export default function CalendarWithDefaultRange() {

With Disabled Dates

2024년 12월

examples/calendar/CalendarWithDisabledDates.tsx

import { Calendar } from "@/components/ui/dynamic/calendar"

export default function CalendarWithDisabledDates() {

With Event Dates

2024년 12월

examples/calendar/CalendarWithEventDates.tsx

import { Calendar } from "@/components/ui/dynamic/calendar"

export default function CalendarWithEventDates() {

속성

이름	타입	기본값	설명
aria-label	string	—	Defines a string value that labels the current element. @see aria-labelledby.
cancelButtonText	string	취소	—
className	string	—	—
confirmButtonText	string	선택	—
defaultEndDate	string	—	—
defaultStartDate	string	—	—
disabled	boolean	false	—
disabledDates	string[]	[]	—
endDate	string	—	—
endPlaceholder	string	—	—
endTitle	string	—	—
eventDates	string[]	[]	—
holidays	string[]	[]	Explicit holiday dates rendered in the KRDS "day-off" red color (weekends are auto-colored).
id	string	—	—
inputId	string	—	—
label	string	—	—
mode	enum	single	—
monthSelectLabel	string	—	—
nextButtonLabel	string	—	—
onCancel	(() => void)	—	—
onChange	((value: string) => void)	—	—
onClick	MouseEventHandler<HTMLDivElement>	—	—
onConfirm	(() => void)	—	—
onMonthChange	((month: number) => void)	—	—
onRangeChange	((startDate: string, endDate: string) => void)	—	—
onTodayClick	(() => void)	—	—
onYearChange	((year: number) => void)	—	—
openButtonLabel	string	—	—
placeholder	string	—	—
position	enum	—	—
prevButtonLabel	string	—	—
readOnly	boolean	false	—
startDate	string	—	—
startPlaceholder	string	—	—
startTitle	string	—	—
style	CSSProperties	—	—
tabIndex	number	—	—
todayButtonText	string	오늘	—
value	string	—	—
yearSelectLabel	string	—	—

긴급 공지 디스클로저

일	월	화	수	목	금	토

일	월	화	수	목	금	토

일	월	화	수	목	금	토

일	월	화	수	목	금	토

일	월	화	수	목	금	토