달력

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

사용 지침

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

예제

기본

2024년 12월
examples/calendar/CalendarDefault.tsx
import { Calendar } from "@/components/ui/calendar"

export default function CalendarDefault() {

단일

2024년 12월
examples/calendar/CalendarSingle.tsx
import { Calendar } from "@/components/ui/calendar"

export default function CalendarSingle() {

범위

2024년 12월
examples/calendar/CalendarRange.tsx
import { Calendar } from "@/components/ui/calendar"

export default function CalendarRange() {

제어 상태

2024년 3월

선택된 날짜: 2024.03.15

examples/calendar/CalendarControlled.tsx
"use client"

import * as React from "react"

제어 상태 범위

2026년 7월
examples/calendar/CalendarControlledRange.tsx
"use client"

import * as React from "react"

하단 위치

2024년 12월
examples/calendar/CalendarBottomPosition.tsx
import { Calendar } from "@/components/ui/calendar"

export default function CalendarBottomPosition() {

상단 위치

2024년 12월
examples/calendar/CalendarTopPosition.tsx
import { Calendar } from "@/components/ui/calendar"

export default function CalendarTopPosition() {

열린 상태

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

2024년 3월
examples/calendar/CalendarOpenState.tsx
"use client"

import * as React from "react"

읽기 전용

2024년 12월
examples/calendar/CalendarReadOnly.tsx
import { Calendar } from "@/components/ui/calendar"

export default function CalendarReadOnly() {

비활성화

2024년 12월
examples/calendar/CalendarDisabled.tsx
import { Calendar } from "@/components/ui/calendar"

export default function CalendarDisabled() {

커스텀 버튼 텍스트

2024년 12월
examples/calendar/CalendarCustomButtonText.tsx
import { Calendar } from "@/components/ui/calendar"

export default function CalendarCustomButtonText() {

기본값 포함

2024년 12월
examples/calendar/CalendarWithDefaultValue.tsx
import { Calendar } from "@/components/ui/calendar"

export default function CalendarWithDefaultValue() {

기본 범위 포함

2024년 12월
examples/calendar/CalendarWithDefaultRange.tsx
import { Calendar } from "@/components/ui/calendar"

export default function CalendarWithDefaultRange() {

비활성화 날짜 포함

2024년 12월
examples/calendar/CalendarWithDisabledDates.tsx
import { Calendar } from "@/components/ui/calendar"

export default function CalendarWithDisabledDates() {

이벤트 날짜 포함

2024년 12월
examples/calendar/CalendarWithEventDates.tsx
import { Calendar } from "@/components/ui/calendar"

export default function CalendarWithEventDates() {

속성

이름타입기본값설명
aria-labelstring—Defines a string value that labels the current element. @see aria-labelledby.
cancelButtonTextstring취소—
classNamestring——
confirmButtonTextstring확인—
defaultEndDatestring——
defaultStartDatestring——
disabledbooleanfalse—
disabledDatesstring[][]—
endDatestring——
endPlaceholderstring——
endTitlestring——
eventDatesstring[][]—
holidaysstring[][]Explicit holiday dates rendered in the KRDS "day-off" red color (Sundays are auto-colored).
idstring——
inputIdstring——
labelstring——
modeenumsingle—
monthSelectLabelstring월 선택—
nextButtonLabelstring다음 달—
onCancel(() => void)——
onChange((value: string) => void)——
onClickMouseEventHandler<HTMLDivElement>——
onConfirm(() => void)——
onMonthChange((month: number) => void)——
onRangeChange((startDate: string, endDate: string) => void)——
onTodayClick(() => void)——
onYearChange((year: number) => void)——
openButtonLabelstring——
placeholderstring——
positionenum——
prevButtonLabelstring이전 달—
readOnlybooleanfalse—
startDatestring——
startPlaceholderstring——
startTitlestring——
styleCSSProperties——
tabIndexnumber——
todayButtonTextstring오늘—
valuestring——
yearSelectLabelstring연도 선택—