Calendar

Betav1.0.0

날짜 선택용 달력. react-day-picker 기반.

Loading…

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

const [date, setDate] = React.useState<Date | undefined>(new Date());

<Calendar mode="single" selected={date} onSelect={setDate} />

Installation

pnpm dlx @groudit/cli@latest add calendar

Composition

Calendar

Dependencies

설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.

npm packages

Package	Version
react-day-picker	`10.0.1`
date-fns	`4.4.0`
clsx	`2.1.1`
tailwind-merge	`3.6.0`
lucide-react	`1.17.0`

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

utils

Accessibility

이 컴포넌트는 WAI-ARIA grid 패턴을 따릅니다.

Keyboard interactions

Key	Description
`←→`	주 안의 날짜 간 이동.
`↑↓`	주 간 이동.
`PgUpPgDn`	전월/익월 이동.
`HomeEnd`	이 주의 첫/마지막 날.
`EnterSpace`	날짜 선택.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.3.1 2.1.1 4.1.2

Notes

•react-day-picker 가 ARIA grid 패턴 자동 적용. caption 으로 월/연 안내.