Calendar
한 달 혹은 일주일 단위의 날짜와 일정을 한눈에 확인할 수 있는 캘린더 컴포넌트입니다.
월간 흐름을 파악하거나 날짜별 일정을 탐색할 때 사용합니다.
컴포넌트 명세 (Component Specification)
사이즈 가이드 (Size Guide )
기본적으로 날짜와 요일 아이템을 사용하며, 화면의 용도에 따라 캘린더 전체 형태가 구분됩니다.
분류 (Variant)
Canlendar의 다양한 분류 기준입니다.
요일 (Day of the Week)
캘린더의 제일 상단에 사용하는 요일 영역입니다. 일요일은
텍스트를 붉은색으로 처리하여 시각적으로 분리합니다.
아이템 분류 (Item Variant)
날짜의 성격을 나타내는 아이템 분류입니다. 기본 평일은 블랙, 휴일은 붉은색 텍스트, 오늘 날짜는 파란색 원형 바탕을 사용합니다.
선택 (Selected Variant)
사용자가 특정 날짜를 탭하여 선택했을 때의 상태입니다. 날짜 외곽에 파란색 테두리 라인을 둘러 현재 포커스 된 날짜를 명확히 구분합니다.
이벤트 인디케이터 (Event Indicator)
해당 날짜에 등록된 일정이 있음을 알려주는 표시입니다. 날짜 숫자 하단에 작은 도트(dot)들을 나열하여 이벤트의 존재 여부를 직관적으로 보여줍니다.
사용 예시 (Use Case)
실제 서비스 화면에서 Canlendar가 배치되고 활용되는 패턴입니다.
월별 캘린더 (Month Canlendar)
근무 현황 화면에서 사용되며, 월간(month) 캘린더 형태를 상단에 배치하고 해당 일자의 출퇴근 및 연장 근무 등 근태 기록을 하단에 시각화하여 살펴볼 수 있습니다.
주간 캘린더 (Week Canlendar)
주간 캘린더를 Horizontal 형태로 상단에 고정하고, 하단 리스트에 해당 날짜의 시간대별 일정을 나열합니다. 날짜 아래의 Event Indicator를 통해 일정이 있는 날을 한눈에 파악할 수 있습니다.
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.
