Calendar

Calendar

날짜를 월·주 단위 그리드, 세로 일정 목록, iOS 스타일 휠(년·월·일)로 표시하는 캘린더 컴포넌트입니다. 다양한 레이아웃과 단일·범위 선택을 지원합니다.

기본

calendar_header · calendar_weekdays · calendar_grid로 월간 뷰를 구성합니다. is-today · is-selected · is-disabled · is-other-month로 날짜 상태를 표현합니다.

2024년 6월

헤더 없음

calendar_no-header로 월·요일 제목 없이 요일 행과 날짜 그리드만 표시합니다. 팝오버·사이드 패널 등 상위 UI에서 제목을 제공할 때 사용합니다.

날짜만

calendar_minimal로 헤더·요일 행 없이 날짜 그리드만 표시합니다. 인라인 날짜 선택·좁은 공간에 적합합니다.

주간

calendar_week · calendar_nav으로 한 주만 표시하고 이전·다음 주 버튼으로 이동합니다. calendar_grid-week는 7열 단일 행 그리드입니다.

6월 9일 ~ 15일
6월 9일 ~ 15일

휠 (iOS 스타일)

calendar_wheel · calendar_wheel-step(이전/다음) · calendar_wheel-columns으로 년·월·일 휠 피커를 구성합니다. 필요한 열만 배치하면 열 수에 맞춰 가로 너비가 줄고 가운데 정렬됩니다.

날짜 선택
년도
년·월
월·일

범위 선택

is-range-start · is-in-range · is-range-end로 기간 선택을 표현합니다. 시작·종료일은 is-selected와 함께 사용합니다.

2024년 6월

이벤트 마커

has-event로 일정이 있는 날짜에 점 표시를 추가합니다. 선택·범위 상태와 함께 사용할 수 있습니다.

2024년 6월

스킨

calendar_borderless · calendar_ghost · calendar_shadow로 외형을 조절합니다.

Borderless
Ghost
Shadow

크기

calendar_sm · calendar_compact · calendar_lg로 셀 크기와 패딩을 조절합니다.

Small
Compact
Large

calendar_footer로 오늘 이동·초기화·확인 등 하단 액션을 배치합니다.

2024년 6월

이중 패널

calendar_group으로 두 달을 나란히 배치합니다. 기간 선택·예약 UI에 사용합니다.

2024년 6월
2024년 7월

세로 일정

calendar_agenda · calendar_agenda-list · calendar_agenda-day로 날짜별 일정을 세로로 표시합니다. calendar_agenda-event에 시간·제목·설명을 담습니다.

6월 14일 ~ 20일
  1. 금14
    • 14:00
      디자인 리뷰컴포넌트 가이드 UI 시안 검토
  2. 토15
    • 09:00
      팀 스탠드업주간 진행 상황 공유
    • 15:30
      QA 일정 점검캘린더 컴포넌트 데모 확인
      진행 중
  3. 일16

    일정 없음

  4. 월17
    • 10:00
      기획 회의3분기 로드맵 논의
    • 13:00
      점심 미팅파트너사 담당자
    • 18:00
      배포 마감v2.4.0 릴리스
  5. 화18
    • 종일
      워크숍디자인 시스템 심화 과정
6월 15일 (토)
  1. 토15
    • 09:00
      팀 스탠드업15분 · Zoom
    • 15:30
      QA 점검회의실 B

상태

calendar_readonly는 날짜 선택을 막고, is-disabled는 캘린더 전체를 비활성화합니다.

읽기 전용
비활성

API · Calendar Props

Prop타입기본값설명
titlestring—내장 헤더 제목 (header 슬롯 없을 때)
aria-labelstring—캘린더 접근성 라벨 (권장)
rolestringapplication루트 role 속성
size'sm' | 'lg'—calendar_sm · calendar_lg
no-headerbooleanfalse헤더 영역 숨김
minimalbooleanfalse최소 스타일 (calendar_minimal)
compactbooleanfalse좁은 셀 (calendar_compact)
borderlessbooleanfalse테두리 없음
shadowbooleanfalse그림자 (calendar_shadow)
ghostbooleanfalse투명 배경 (calendar_ghost)
weekbooleanfalse주간 뷰 레이아웃
weekendsbooleanfalse주말 강조 (calendar_weekends)
agendabooleanfalse아젠다 레이아웃
wheelbooleanfalse휠 피커 레이아웃
readonlybooleanfalse날짜 선택 불가
disabledbooleanfalse전체 비활성 (is-disabled)

API · CalendarHeader Props

Prop타입기본값설명
titlestring—월·기간 제목 (calendar_title)
prev-labelstring이전 달이전 버튼 aria-label
next-labelstring다음 달다음 버튼 aria-label
show-navbooleantrue이전·다음 네비게이션 표시
show-prevboolean—이전 버튼만 제어 (show-nav 대체)
show-nextboolean—다음 버튼만 제어

API · CalendarNav Props

Prop타입기본값설명
labelstring—주간 네비 라벨
prev-labelstring이전 주이전 버튼 aria-label
next-labelstring다음 주다음 버튼 aria-label

API · CalendarWeekdays Props

Prop타입기본값설명
labelsstring[]일~토요일 라벨 배열

API · CalendarMonth Props

Prop타입기본값설명
daysobject[]—CalendarDay용 셀 데이터 배열
presetstringjune2024데모용 월 프리셋
selectednumber—선택일 (프리셋·partial용)
todaynumber—오늘 날짜 (프리셋·partial용)
disablednumber[]—비활성 날짜 목록
eventsnumber[]—이벤트 표시 날짜
range-startnumber—범위 시작일
range-endnumber—범위 종료일
weekendsbooleanfalse주말 셀 표시
partialnumber—부분 월 데모 일수
weekbooleanfalse주간 그리드
readonlybooleanfalse날짜 버튼 비활성

CalendarMonth는 CalendarGrid + CalendarDay를 묶는 편의 컴포넌트입니다.

API · CalendarGrid Props

Prop타입기본값설명
weekbooleanfalse7열 주간 그리드 (calendar_grid-week)

API · CalendarDay Props

Prop타입기본값설명
daynumber | string—날짜 숫자 (필수)
other-monthbooleanfalse다른 달 (is-other-month)
todaybooleanfalse오늘 (is-today)
selectedbooleanfalse선택 (is-selected)
disabledbooleanfalse비활성 (is-disabled)
sundaybooleanfalse일요일 (is-sunday)
saturdaybooleanfalse토요일 (is-saturday)
range-startbooleanfalse범위 시작 (is-range-start)
range-endbooleanfalse범위 끝 (is-range-end)
in-rangebooleanfalse범위 내 (is-in-range)
eventbooleanfalse이벤트 점 (has-event)
readonlybooleanfalse클릭 불가
ripplebooleantrue클릭 파장(ripple). true 시 data-ripple 활성 · false 비활성. 기본 활성

API · CalendarWheel Props

Prop타입기본값설명
titlestring—툴바 제목
aria-labelstring—휠 피커 접근성 라벨
shadowbooleanfalseCalendar에 전달
borderlessbooleanfalseCalendar에 전달
footerbooleanfalse하단 푸터 영역 표시
toolbarbooleantrue상단 툴바 표시
cancel-labelstring—취소 버튼 텍스트
confirm-labelstring—확인 버튼 텍스트

API · CalendarWheelColumn Props

Prop타입기본값설명
labelstring—listbox aria-label
itemsarray[]문자열·숫자 또는 { label, selected } 객체
selectedstring | number—선택 값
show-stepsbooleantrue위·아래 스텝 버튼
prev-labelstring—이전 스텝 aria-label
next-labelstring—다음 스텝 aria-label
ripplebooleantrue클릭 파장(ripple). true 시 자식 클릭 표면에 data-ripple · false 시 data-no-ripple으로 하위 전체 비활성

API · Calendar Slots

슬롯설명
header헤더 (CalendarHeader)
weekdays요일 행 (CalendarWeekdays)
default월 그리드·휠 등 본문
footer푸터 (CalendarFooter)

API · CalendarHeader · Footer · Group Slots

슬롯설명
default헤더 우측 추가 콘텐츠
슬롯설명
default푸터 액션 (기본: 초기화·확인)
슬롯설명
default여러 Calendar 나란히

API · CalendarGrid · CalendarWheel Slots

슬롯설명
defaultCalendarDay 자식
슬롯설명
toolbar상단 툴바 커스텀
defaultCalendarWheelColumn 목록
footer하단 푸터

클래스 · 속성

Vue 컴포넌트가 렌더하는 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날짜 상태

디자인 토큰

토큰기본값설명
--calendar-cell-size · --calendar-cell-size-sm · --calendar-cell-size-lg—날짜 셀 크기
--calendar-gap2px그리드 간격
--calendar-wheel-height · --calendar-wheel-row-height—휠 피커 높이
--calendar-agenda-gap · --calendar-agenda-date-width—아젠다 레이아웃