달력

달력 구성 요소를 사용하여 날짜를 시각적으로 표현하고 일, 월, 연도에 대한 뷰를 통해 해당 부분을 탐색할 수 있는 일관된 수단을 제공합니다. 달력은 날짜를 탐색하고 하나 이상(예: 날짜 범위)을 선택할 수 있도록 뷰에 인라인으로 배치됩니다. 달력은 Ignite UI for Angular와 시각적으로 동일하며 Ignite UI for Angular 내에서 사용됩니다.

Calendar Demo

Layout

캘린더는 한 번에 한 달을 표시하는 데 적합한 수평 또는 수직 레이아웃으로 제공되지만 두 달을 나란히 표시하는 멀티뷰 옵션도 지원합니다. Figma 에서는 "Orientation" 속성과 "Multiview" 부울 속성을 사용하여 전환할 수 있지만 Sketch 및 Adobe XD에서는 구성 요소를 삽입할 때 방향과 보기를 선택해야 합니다.

Content

각 주요 날짜 부분을 쉽게 표시할 수 있도록 Figma 에는 일, 월 또는 연도 보기 중에서 선택할 수 있는 "보기" 속성이 있으며, Sketch 및 Adobe XD에서는 구성 요소를 삽입하기 전에 이 속성을 선택해야 합니다.

Week Start

Figma 에서는 주의 시작에 대한 가장 일반적인 두 가지 시나리오인 일요일과 월요일을 지원하는 "주 시작" 속성에서 주의 시작을 선택할 수 있습니다. Sketch 및 Adobe XD에서는 캘린더를 삽입할 때 옵션으로 표시됩니다.

Calendar에는 생략할 수 있는 기본 제공 헤더가 있습니다. Figma 에서는 "Header" 부울 속성을 사용하여 이 작업을 수행할 수 있습니다. Sketch 스마트 레이아웃을 사용하면 헤더를 ~기호 없음으로 설정하여 이를 달성할 수 있으므로 양식에 보다 원활하게 포함할 수 있는 기본 캘린더를 만들 수 있습니다. Adobe XD에서 헤더 레이어를 삭제하면 나머지 레이아웃이 자동으로 조정됩니다.

Week Numbers

캘린더에는 주 번호에 대한 지원 기능도 내장되어 있지만, UI의 이 부분을 표시하지 않으려면 Figma의 속성 패널에서 "주 번호" 부울 속성을 끄거나 Sketch에서 주 번호를 ~기호 없음으로 설정하거나 Adobe XD에서 레이어를 삭제하면 됩니다.

Selection

캘린더를 사용하면 세 가지 선택 모드 중에서 선택할 수 있습니다 : 사용자가 하나의 날짜 만 선택할 수 있도록 제한하는 Single Day, 시작 날짜와 종료 날짜 사이의 모든 날짜를 선택하는 것을 의미하는 Range 제공 및 임의의 날짜를 선택할 수있는 Multiple Day.