Groudit UI

Calendar

Betav1.0.0

react-day-picker 기반 날짜 선택. single/multiple/range 모드 지원.

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 shadcn@latest add https://groudit.com/r/calendar.json

Composition

Calendar

Dependencies

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

npm packages

PackageVersion
react-day-picker10.0.1
date-fns4.4.0
clsx2.1.1
tailwind-merge3.6.0
lucide-react1.17.0

Groudit components

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

Accessibility

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

Keyboard interactions

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

WCAG 2.1 AA

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

1.3.12.1.14.1.2

Notes

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