DayPicker

한눈에#

반복 일정의 요일/일자를 다중 선택합니다 — week는 기본 월~일 7버튼(값은 일=0…토=6), monthly는 1~31 그리드를 aria-pressed 토글 버튼 그룹으로 제공합니다.

월화수목금토일

• 반복 요일/일자 다중 선택
• week 0~6 · monthly 1~31
• aria-pressed 토글
• 비제어

버튼은 44px 정사각 터치 타깃 — 선택은 색 + aria-pressed 병행(색맹 안전)

사용 시점#

매주/매월 반복되는 요일·일자를 다중 선택하면 DayPicker — 특정 날짜나 일반 다중 선택은 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

DayPicker를 직접 조작해 보세요

속성·테마·토큰을 바꾸고 React·Flutter 코드를 확인하는 풀스크린 빌더로 엽니다.

빌더 열기→

플레이그라운드는 넓은 작업 영역이 필요해 웹·태블릿에서 편집할 수 있어요.

변형#

mode가 변형 축입니다 — 'week'(기본)는 월~일 7버튼(값은 일=0…토=6), 'monthly'는 1~31 일자를 달력과 같은 7열 그리드(값 1~31)로 펼칩니다. weekStartsOn="sunday"를 주면 표시 순서를 일~토로 바꾸며, 선택값 인덱스는 기존처럼 일=0 … 토=6으로 유지됩니다.

12345678910111213141516171819202122232425262728293031

weekLabels로 week 모드 라벨을 오버라이드할 수 있습니다(7개, 값 인덱스는 일=0 … 토=6 고정). 표시 순서만 weekStartsOn을 따릅니다.

크기#

단일 크기입니다 — 버튼은 control.height-md(44px) 정사각으로 터치 히트 영역을 그대로 충족합니다. monthly 그리드는 7열로 고정되어 한 달 31일이 5줄 안에 들어갑니다.

상태#

월화수목금토일

• 선택 — aria-pressed="true" + color.primary 채움 + color.on-primary 잉크
• Hover — 미선택 color.surface-hover · 선택 color.primary-hover
• Focus — :focus-visible에 color.primary 아웃라인 링
• Disabled — disabled 배열의 값은 버튼 disabled로 클릭·토글 차단

비제어 컴포넌트입니다 — defaultValue로 시작하고 토글마다 오름차순 정렬된 onChange(values)로 알립니다.

Props#

접근성#

루트가 role="group"이고 aria-label이 필수입니다 — 버튼 7~31개가 하나의 질문(“어느 요일/일자에 반복?”)에 속함을 보조기술에 알립니다. 각 버튼은 네이티브 button + aria-pressed 토글 버튼입니다.

비활성 값은 disabled로 보고되어 포커스·클릭이 차단되고, 선택 상태는 색상만이 아니라 aria-pressed로도 전달됩니다.

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족 — Calendar의 선택 어휘 공유).