Calendar
설치 확인날짜 표시와 선택, 비활성 날짜
1. 목적과 출처
날짜 표시와 선택, 비활성 날짜
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/calendar.tsx- Registry
@adcapsule/calendar
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| 쓰임 | 모양 |
|---|---|
| 날짜 하나 mode="single" | |
| 기간 mode="range" |
3. 속성 바꿔 보기
2026. 11. 12.
mode
4. 설치와 사용
- npm 패키지
- lucide-react, react-day-picker
- 함께 설치
- @adcapsule/button, @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- mode: single·range·multiple
- 기본 언어는 한국어(locale로 바꿈)
- captionLayout="dropdown"으로 연·월 선택
- disabled로 고를 수 없는 날짜
- numberOfMonths
공통으로 유지할 토큰
- control.height.sm (날짜 칸, 큰 글씨 모드에서 커짐)
- radius.md (날짜 칸)
- accent.solid (고른 날짜)
- surface.raised (오늘·기간 가운데)