MiniCalendar
위젯·사이드 패널용 작은 월 달력. 표식만.
- 라이브러리 전용
개요
미리보기
Switch to month listSwitch to year list
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
예시
상태
선택
Switch to month listSwitch to year listSun Mon Tue Wed Thu Fri Sat 앞뒤 달 보임
Switch to month listSwitch to year listSun Mon Tue Wed Thu Fri Sat 위젯 안
Switch to month listSwitch to year listSun Mon Tue Wed Thu Fri Sat
이렇게 · 이렇게 하지 않기
- 이렇게 하지 않기 기록이나 일정이 있는 날은 표식만 하고 개수나 밀도를 칠하지 않는다.
- 이렇게 선택한 날은 글자와 모양으로 구분한다.
- 이렇게 일정 표식은 캘린더에 “있던 일”이라는 뜻이지 참석을 뜻하지 않는다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
label? | string | | 달력 묶음의 접근 이름. 비우면 “날짜 선택”. |
defaultValue? | string | 2026-10-19 | 비제어 초기 날짜(YYYY-MM-DD). |
value? | string | | 제어 값. null이면 선택 없음. |
min? | string | | 고를 수 있는 가장 이른 날짜(YYYY-MM-DD). 그 전 날짜는 초점은 받지만 aria-disabled. |
max? | string | | 고를 수 있는 가장 늦은 날짜(YYYY-MM-DD). |
showOutsideDays? | boolean | false | 앞뒤 달의 날짜도 보이고 고를 수 있다. |
weekStart? | 'locale' | 'monday' | 'sunday' | locale | locale은 CLDR 주 시작(ko·en 일요일, zh·es 월요일). 서버와 브라우저가 같은 결과를 내도록 고정 표를 쓴다. |
timeZone? | string | Asia/Seoul | “오늘”을 정하는 IANA 시간대. 기본 Asia/Seoul. |
today? | string | 2026-10-19 | 고정된 “오늘”(YYYY-MM-DD). 테스트·카탈로그용. 비우면 timeZone의 실제 날짜. |
holidays? | { date: string; name: string }[] | — | 사용자 지역의 공휴일. 기본은 없음(KR을 강제하지 않는다). 이름은 날짜의 접근 이름과 달력 아래 목록에 들어간다. |
markedDates? | string[] | — | 기록이 있는 날(YYYY-MM-DD). 점 하나와 “기록 있음”만 붙는다. 개수나 밀도는 그리지 않는다. |
controls? | string | | 위젯 안에서 고른 날이 바꾸는 옆 목록의 id(aria-controls). 그 id가 페이지에 있을 때만 붙인다. |
DatePicker size="compact" | — | — | 같은 컴포넌트다. 계약 제안대로 MiniCalendar는 이름만 남긴 얇은 감싸개다. |
onChange(value: string) | — | — | YYYY-MM-DD로 부른다. |
| 그 밖의 속성 | — | — | id, aria-* 등 바깥 <div role="group">의 속성을 전달한다. |
접근성
키보드: 격자는 Tab 정지점 하나. ←→ 하루 · ↑↓ 한 주 · Home/End 주의 처음/끝 · PageUp/PageDown 이전/다음 달 · Shift+PageUp/PageDown 이전/다음 해 · Enter·Space 선택. 월·연 제목 버튼은 월/연 격자로 바꾸고 Esc로 돌아온다.
- <table role="grid">, 요일 <th scope="col" abbr="월요일">, 날짜 칸 role="gridcell" + aria-selected. 버튼 이름은 내용에서 나온다: 숨긴 “2026년 10월 ” + 보이는 “3” + 숨긴 “일 토요일, 개천절”(2.5.3 보이는 글자가 이름 안에). 오늘은 aria-current="date".
- 날짜 칸은 어느 폭에서나 44×44(7×44 = 308). 320 화면에서는 페이지 여백을 좌우 10px까지 써서 가로 스크롤 없이 들어간다. 선택은 채운 원 + 굵기, 오늘은 테두리 + 굵기 + “오늘” 텍스트 버튼(작은 크기에도), 범위 밖은 취소선.
- 이전/다음 달 버튼은 초점이 버튼에 남으므로 새 달(“2026년 11월”)을 공용 announce()로 한 번 알린다. 키보드로 달을 넘기면 알리지 않는다(초점이 간 날짜 이름에 달이 들어 있다, README §9-6).