Calendar
날짜를 월·주 단위 그리드, 세로 일정 목록, iOS 스타일 휠(년·월·일)로 표시하는 캘린더 컴포넌트입니다. 다양한 레이아웃과 단일·범위 선택을 지원합니다.
기본
calendar_header · calendar_weekdays · calendar_grid로 월간 뷰를 구성합니다. is-today · is-selected · is-disabled · is-other-month로 날짜 상태를 표현합니다.
헤더 없음
calendar_no-header로 월·요일 제목 없이 요일 행과 날짜 그리드만 표시합니다. 팝오버·사이드 패널 등 상위 UI에서 제목을 제공할 때 사용합니다.
날짜만
calendar_minimal로 헤더·요일 행 없이 날짜 그리드만 표시합니다. 인라인 날짜 선택·좁은 공간에 적합합니다.
주간
calendar_week · calendar_nav으로 한 주만 표시하고 이전·다음 주 버튼으로 이동합니다. calendar_grid-week는 7열 단일 행 그리드입니다.
휠 (iOS 스타일)
calendar_wheel · calendar_wheel-step(이전/다음) · calendar_wheel-columns으로 년·월·일 휠 피커를 구성합니다. 필요한 열만 배치하면 열 수에 맞춰 가로 너비가 줄고 가운데 정렬됩니다.
범위 선택
is-range-start · is-in-range · is-range-end로 기간 선택을 표현합니다. 시작·종료일은 is-selected와 함께 사용합니다.
이벤트 마커
has-event로 일정이 있는 날짜에 점 표시를 추가합니다. 선택·범위 상태와 함께 사용할 수 있습니다.
스킨
calendar_borderless · calendar_ghost · calendar_shadow로 외형을 조절합니다.
크기
calendar_sm · calendar_compact · calendar_lg로 셀 크기와 패딩을 조절합니다.
푸터
calendar_footer로 오늘 이동·초기화·확인 등 하단 액션을 배치합니다.
이중 패널
calendar_group으로 두 달을 나란히 배치합니다. 기간 선택·예약 UI에 사용합니다.
세로 일정
calendar_agenda · calendar_agenda-list · calendar_agenda-day로 날짜별 일정을 세로로 표시합니다. calendar_agenda-event에 시간·제목·설명을 담습니다.
- 금14
- 14:00디자인 리뷰컴포넌트 가이드 UI 시안 검토
- 14:00
- 토15
- 09:00팀 스탠드업주간 진행 상황 공유
- 15:30QA 일정 점검캘린더 컴포넌트 데모 확인
- 09:00
- 일16
일정 없음
- 월17
- 10:00기획 회의3분기 로드맵 논의
- 13:00점심 미팅파트너사 담당자
- 18:00배포 마감v2.4.0 릴리스
- 10:00
- 화18
- 종일워크숍디자인 시스템 심화 과정
- 종일
- 토15
- 09:00팀 스탠드업15분 · Zoom
- 15:30QA 점검회의실 B
- 09:00
상태
calendar_readonly는 날짜 선택을 막고, is-disabled는 캘린더 전체를 비활성화합니다.
API · Calendar Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
title | string | — | 내장 헤더 제목 (header prop 없을 때) |
ariaLabel | string | — | 캘린더 접근성 라벨 (권장) |
role | string | application | 루트 role 속성 |
size | 'sm' | 'lg' | — | calendar_sm · calendar_lg |
noHeader | boolean | false | 헤더 영역 숨김 (calendar_no-header) |
minimal | boolean | false | 최소 스타일 (calendar_minimal) |
compact | boolean | false | 좁은 셀 (calendar_compact) |
borderless | boolean | false | 테두리 없음 |
shadow | boolean | false | 그림자 (calendar_shadow) |
ghost | boolean | false | 투명 배경 (calendar_ghost) |
week | boolean | false | 주간 뷰 레이아웃 |
weekends | boolean | false | 주말 강조 (calendar_weekends) |
agenda | boolean | false | 아젠다 레이아웃 |
wheel | boolean | false | 휠 피커 레이아웃 |
readonly | boolean | false | 날짜 선택 불가 |
disabled | boolean | false | 전체 비활성 (is-disabled) |
className | string | — | calendar 루트에 추가 클래스 |
API · CalendarHeader Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
title | string | — | 월·기간 제목 (calendar_title) |
prevLabel | string | 이전 달 | 이전 버튼 aria-label |
nextLabel | string | 다음 달 | 다음 버튼 aria-label |
showNav | boolean | true | 이전·다음 네비게이션 표시 |
showPrev | boolean | — | 이전 버튼만 제어 (showNav 대체) |
showNext | boolean | — | 다음 버튼만 제어 |
API · CalendarNav Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
label | string | — | 주간 네비 라벨 |
prevLabel | string | 이전 주 | 이전 버튼 aria-label |
nextLabel | string | 다음 주 | 다음 버튼 aria-label |
API · CalendarWeekdays Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
labels | string[] | 일~토 | 요일 라벨 배열 |
API · CalendarMonth Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
days | object[] | — | CalendarDay용 셀 데이터 배열 |
preset | string | june2024 | 데모용 월 프리셋 |
selected | number | — | 선택일 (프리셋·partial용) |
today | number | — | 오늘 날짜 (프리셋·partial용) |
disabled | number[] | — | 비활성 날짜 목록 |
events | number[] | — | 이벤트 표시 날짜 |
rangeStart | number | — | 범위 시작일 |
rangeEnd | number | — | 범위 종료일 |
weekends | boolean | false | 주말 셀 표시 |
partial | number | — | 부분 월 데모 일수 |
week | boolean | false | 주간 그리드 |
readonly | boolean | false | 날짜 버튼 비활성 |
CalendarMonth는 CalendarGrid + CalendarDay를 묶는 편의 컴포넌트입니다.
API · CalendarGrid Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
week | boolean | false | 7열 주간 그리드 (calendar_grid-week) |
API · CalendarDay Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
day | number | string | — | 날짜 숫자 (필수) |
otherMonth | boolean | false | 다른 달 (is-other-month) |
today | boolean | false | 오늘 (is-today) |
selected | boolean | false | 선택 (is-selected) |
disabled | boolean | false | 비활성 (is-disabled) |
sunday | boolean | false | 일요일 (is-sunday) |
saturday | boolean | false | 토요일 (is-saturday) |
rangeStart | boolean | false | 범위 시작 (is-range-start) |
rangeEnd | boolean | false | 범위 끝 (is-range-end) |
inRange | boolean | false | 범위 내 (is-in-range) |
event | boolean | false | 이벤트 점 (has-event) |
readonly | boolean | false | 클릭 불가 |
ripple | boolean | true | 클릭 파장(ripple). true 시 data-ripple 활성 · false 비활성. 기본 활성 |
API · CalendarWheel Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
title | string | — | 툴바 제목 |
ariaLabel | string | — | 휠 피커 접근성 라벨 |
shadow | boolean | false | Calendar에 전달 |
borderless | boolean | false | Calendar에 전달 |
footer | boolean | false | 하단 푸터 영역 표시 |
toolbar | boolean | true | 상단 툴바 표시 |
toolbarContent | ReactNode | — | 툴바 커스텀 (Vue #toolbar 슬롯 대응) |
footerContent | ReactNode | — | 푸터 커스텀 (Vue #footer 슬롯 대응) |
cancelLabel | string | — | 취소 버튼 텍스트 |
confirmLabel | string | — | 확인 버튼 텍스트 |
API · CalendarWheelColumn Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
label | string | — | listbox aria-label |
items | array | [] | 문자열·숫자 또는 { label, selected } 객체 |
selected | string | number | — | 선택 값 |
showSteps | boolean | true | 위·아래 스텝 버튼 |
prevLabel | string | — | 이전 스텝 aria-label |
nextLabel | string | — | 다음 스텝 aria-label |
ripple | boolean | true | 클릭 파장(ripple). true 시 자식 클릭 표면에 data-ripple · false 시 data-no-ripple으로 하위 전체 비활성 |
API · Calendar Children
| Children / Prop | 설명 |
|---|---|
header | 헤더 (Vue #header 슬롯 대응, CalendarHeader 등) |
weekdays | 요일 행 (Vue #weekdays 슬롯 대응, CalendarWeekdays) |
children | 월 그리드·아젠다·휠 등 본문 (Vue default 슬롯 대응) |
footer | 푸터 (Vue #footer 슬롯 대응, CalendarFooter) |
API · CalendarHeader · Footer · Group Children
| Children | 설명 |
|---|---|
children | 헤더 우측 추가 콘텐츠 (Vue default 슬롯 대응) |
| Children | 설명 |
|---|---|
children | 푸터 액션 (Vue default 슬롯 대응, 기본: 초기화·확인) |
| Children | 설명 |
|---|---|
children | 여러 Calendar 나란히 (Vue default 슬롯 대응) |
API · CalendarGrid · CalendarWheel Children
| Children | 설명 |
|---|---|
children | CalendarDay 자식 (Vue default 슬롯 대응) |
| Children / Prop | 설명 |
|---|---|
toolbarContent | 상단 툴바 커스텀 (Vue #toolbar 슬롯 대응) |
children | CalendarWheelColumn 목록 (Vue default 슬롯 대응) |
footerContent | 하단 푸터 (Vue #footer 슬롯 대응) |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
calendar | 캘린더 루트 |
calendar_sm · calendar_lg · calendar_compact | 크기 |
calendar_borderless · calendar_shadow · calendar_ghost · calendar_minimal | 스킨 |
calendar_week · calendar_weekends · calendar_agenda · calendar_wheel | 레이아웃 모드 |
calendar_header · calendar_title · calendar_nav | 헤더·네비 |
calendar_weekdays · calendar_weekday | 요일 행 |
calendar_grid · calendar_grid-week | 날짜 그리드 |
calendar_day | 날짜 셀 버튼 |
calendar_footer · calendar_group | 푸터·다중 캘린더 |
calendar_wheel-* | 휠 피커 파트 |
is-today · is-selected · is-in-range · is-range-start · is-range-end | 날짜 상태 |
is-other-month · is-sunday · is-saturday · is-disabled · has-event | 날짜 상태 |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" | 해당 요소 ripple 비활성 |
data-no-ripple | 하위 전체 ripple 비활성 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--calendar-cell-size · --calendar-cell-size-sm · --calendar-cell-size-lg | — | 날짜 셀 크기 |
--calendar-gap | 2px | 그리드 간격 |
--calendar-wheel-height · --calendar-wheel-row-height | — | 휠 피커 높이 |
--calendar-agenda-gap · --calendar-agenda-date-width | — | 아젠다 레이아웃 |