Web Components 달력 개요

Ignite UI for Web Components 가볍고 구성이 쉽습니다. 날짜와 요일을 표시하는데 사용됩니다. 이는 또한 최종 사용자에게 월별 또는 연간 보기를 제공하는 가장 좋은 방법이기도 합니다. Ignite UI for Web Components 사람들이 탐색할 수 있는 최소 및 최대 날짜 범위를 제한할 수 있습니다.

Ignite UI 용 Ignite UI for Web Components 캘린더는 날짜 정보를 쉽고 직관적으로 표시할 수 있는 방법을 제공합니다. 단일 또는 다중 날짜 선택 모드, 날짜 범위 강조 표시 및 선택, 키보드 탐색, 주 번호 활성화, 크기 및 간격 옵션 등 다양한 기능이 포함되어 있습니다.

Web Components Calendar Example

다음 Web Components IgcCalendarComponent 구성 요소 예는 하루 선택 모드가 있는 기본 달력을 보여줍니다. 작동 방식을 확인하거나 숨은 코드를 검사해 보세요.

How To Create a Calendar in Web Components with Ignite UI

먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

npm install igniteui-webcomponents

import { defineComponents, IgcCalendarComponent } from 'igniteui-webcomponents';

defineComponents(IgcCalendarComponent);

Ignite UI for Web Components 에 대한 전체 소개는 시작 항목을 참조하세요.

웹 구성 요소 IgcCalendarComponent Ignite UI for Web Components 사용을 시작하는 가장 간단한 방법은 다음과 같습니다.

<igc-calendar></igc-calendar>

Selection Modes

사용자는 단일 선택, 다중 선택 또는 범위 선택의 세 가지 선택 모드 중에서 선택할 수 있습니다. 기본적으로 Ignite UI for Web Components IgcCalendarComponent은(는) 단일 선택 모드를 사용하고 있지만 selection이 예에 표시된 속성입니다.

<igc-calendar selection="multiple"></igc-calendar>

Range Selection

동일한 접근 방식에 따라 selection 범위 모드로 전환할 수 있습니다.

<!-- Range selection mode -->
<igc-calendar selection="range"></igc-calendar>

Active View and Date

Ignite UI for Web Components 하면 일, 월, 연도의 세 가지 보기 간에 전환할 수 있습니다. 구성 요소의 activeView 속성은 현재 보기를 반영합니다. 기본적으로 달력은 처음 로드될 때 현재 날짜를 표시합니다. activeDate 속성을 설정하여 이를 수정할 수 있습니다. activeDate 속성은 최종 사용자가 현재 표시하는 날짜의 변경 사항도 반영합니다.

Header Options

기본적으로 Ignite UI for Web Components 선택한 날짜에 대한 정보가 포함된 헤더 영역을 렌더링합니다. 다음을 설정하여 헤더를 숨길 수 있습니다. HasHeader 재산 거짓. 구성할 수도 있습니다. vertical 또는 horizontal 헤더 방향을 사용하여 headerOrientation 재산.

[!Note] Please note that the Ignite UI for Web Components Calendar header is not rendered when the selection is set to multiple.

[!Note] Please note that the Ignite UI for Web Components Calendar DOM properties use camelCase naming while their corresponding HTML attributes are using kebab-case. For example the headerOrientation property corresponds to the header-orientation attribute.

Ignite UI for Web Components 헤더 제목을 사용자 정의할 수 있는 title 슬롯을 노출합니다.

<igc-calendar selection="range" header-orientation="vertical">
    <span slot="title">Trip dates</span>
</igc-calendar>

다음 샘플은 위 구성을 보여줍니다.

Localization and Formatting

달력의 특성상 현지화와 서식 지정은 모든 달력에 필수적입니다. Ignite UI for Web Components에서 IgcCalendarComponent 이는 다음 속성을 통해 제어되고 사용자 정의됩니다. locale, formatOptions, weekStart.

계속해서 다른 사용자 정의와 함께 시도해 보겠습니다. 가장 먼저 설정해야 할 것은 한 주의 시작일을 제어하는 weekStart 입니다. 기본값은 Sunday 이므로 Monday로 설정하겠습니다. 또한 달력 보기에서 월과 요일의 형식을 지정하는 데 사용되는 옵션을 지정하는 formatOptions 속성을 사용자 정의합니다. 마지막으로 사용자가 선택한 위치에 따라 locale 속성을 값으로 설정합니다.

<igc-radio-group alignment="horizontal">
    <igc-radio name="locale" value="en" checked>EN</igc-radio>
    <igc-radio name="locale" value="de">DE</igc-radio>
    <igc-radio name="locale" value="fr">FR</igc-radio>
    <igc-radio name="locale" value="ar">AR</igc-radio>
    <igc-radio name="locale" value="ja">JA</igc-radio>
</igc-radio-group>

<igc-calendar
    id="calendar1"
    week-start="monday"
>
</igc-calendar>

this.calendar = document.getElementById('calendar1') as IgcCalendarComponent;
this.calendar.formatOptions = {
    month: 'short',
    weekday: 'short'
};

this.radios = document.querySelectorAll('igc-radio') as NodeListOf<IgcRadioComponent>;
this.radios.forEach(radio => {
    radio.addEventListener('igcChange', () => {
        if (radio.checked) {
            this.calendar.locale = radio.value;
        }
    });
})

모든 것이 순조롭게 진행되었다면 이제 사용자 선택에 따라 로케일 표현도 변경하는 사용자 정의된 디스플레이를 갖춘 달력이 있어야 합니다. 그것을 살펴보자:

Disabled dates

최종 사용자가 선택할 수 없는 달력의 날짜를 비활성화하려는 경우도 있습니다. 이 기능은 disabledDates 재산. 그만큼 disabledDates 속성은 배열입니다. DateRangeDescriptor 사물. 각 설명자는 Type 그리고 선택적으로 dateRange 이것은 배열이다 Date 사물.

​Type 속성에 사용할 수 있는 옵션은 다음과 같습니다.

• After-dateRange의 첫 번째 날짜 이후의 날짜를 비활성화합니다.
• Before-dateRange의 첫 번째 날짜 이전 날짜를 비활성화합니다.
• Between-dateRange의 첫 번째 날짜와 두 번째 날짜 사이의 날짜를 비활성화합니다.
• Specific-dateRange 배열에 지정된 날짜를 비활성화합니다.
• Weekdays- 모든 평일을 비활성화합니다.
• Weekends- 주말 내내 비활성화됩니다.

이번 달 3일과 8일 사이의 날짜를 비활성화하는 샘플을 만들어 보겠습니다.

const today = new Date(Date.now());
const range = [
    new Date(today.getFullYear(), today.getMonth(), 3),
    new Date(today.getFullYear(), today.getMonth(), 8)
];

this.calendar.disabledDates = [{ type: DateRangeType.Between, dateRange: range }];

이러한 구성의 결과는 다음과 같습니다.

Special dates

​specialDates 속성은 disabledDates와 거의 동일한 구성 원칙을 사용합니다. 특별 날짜는 강조된 모양과 느낌을 가지며 장애인 날짜와 달리 선택할 수 있습니다.

달력에 특별한 날짜를 추가해 보겠습니다. 이를 위해 DateRangeDescriptor 생성하고 이번 달 3일과 8일 사이의 날짜를 전달합니다.

const today = new Date();
const range = [
    new Date(today.getFullYear(), today.getMonth(), 3),
    new Date(today.getFullYear(), today.getMonth(), 8)
];

this.calendar.specialDates = [{ type: DateRangeType.Between, dateRange: range }];

다음 데모에서는 휴가 요청 옵션이 포함된 캘린더를 보여줍니다.

Week numbers

​showWeekNumbers 속성을 사용하여 Calendar 구성 요소의 주 번호를 표시할 수 있습니다. 다음과 같이 해당 부울 속성 show-week-numbers 사용하여 이를 수행할 수 있습니다.

<igc-calendar show-week-numbers></igc-calendar>

다음 데모에서는 주 번호가 활성화된 달력을 보여줍니다.

Multiple Months

​visibleMonths 속성을 사용하면 달력이 days 보기일 때 한 달 이상을 표시할 수 있습니다. 여러 달이 표시되는 경우 orientation 속성을 사용하여 세로로 쌓을지 가로로 쌓을지 구성할 수 있습니다. 기본적으로 orientation 속성은 horizontal으로 설정됩니다.

달력에는 이전 및 다음 달의 선행 및 후행 날짜가 표시됩니다. hideOutsideDays 속성을 true로 설정하거나 해당 부울 속성 hideOutsideDays 사용하여 이러한 날짜를 숨길 수 있습니다.

<igc-calendar visible-months="2" hide-outside-days></igc-calendar>

다음 샘플은 여러 달 구성을 보여줍니다.

크기

​--ig-size CSS 변수를 사용하여 달력 내부 요소의 크기와 간격을 제어할 수 있습니다. 구성 요소의 기본 크기는 큽니다.

이벤트

Calendar 구성 요소는 최종 사용자가 선택한 날짜를 변경할 때 Change 이벤트를 발생시킵니다. 다음과 같이 이벤트를 구독할 수 있습니다.

this.calendar.addEventListener('igcChange', ev => console.log(ev.detail));

키보드 탐색

​Tab 키를 사용하여 페이지를 탐색하는 경우 W3 접근성 권장 사항에 따라 IgcCalendarComponent에 다음 탭 정지가 도입된다는 점을 명심해야 합니다.

• 월 선택 버튼
• 연도 선택 버튼
• 이전 버튼
• 다음 버튼
• 활성 날짜 요소

언제 일/월/년에서 IgcCalendarComponent 구성요소에 초점이 맞춰져 있으면 다음을 사용하세요.

• PageUp 키는 이전 월/년/년 페이지로 이동합니다.
• PageDown 키를 누르면 다음 달/연도/연도 페이지로 이동합니다.
• 이번 달의 첫날/보기의 첫 번째 달/보기의 첫 해에 초점을 맞추는 홈 키입니다.
• 이번 달의 마지막 날/보기의 마지막 달/보기의 마지막 연도에 초점을 맞추는 종료 키입니다.
• 일/월/년을 탐색하려면 화살표 키를 사용하세요. 첫 번째 항목 앞과 마지막 항목 뒤를 탐색하면 보기가 다음/이전 월/년/년 페이지로 전환됩니다.

언제 낮 안에 days 뷰에 초점이 맞춰져 있으면 다음을 사용하세요.

• 이전 연도로 이동하려면 Shift + PageUp 키를 누르세요.
• 다음 연도로 이동하려면 Shift + PageDown 키를 누르세요.
• 현재 초점을 맞춘 날짜를 선택하려면 Space 또는 Enter 키를 누르세요.

언제 월 안에 months 뷰에 초점이 맞춰져 있으면 다음을 사용하세요.

• 공간 또는 입력하다 변경하는 키 activeDate 현재 집중된 달로 전환하고 days 보다.

때 년도 안에 years 뷰에 초점이 맞춰져 있으면 다음을 사용하세요.

• 공간 또는 입력하다 변경하는 키 activeDate 현재 초점을 맞춘 연도로 전환하고 months 보다.

​이전 또는 다음 버튼(하위 헤더에 있음)에 초점이 맞춰지면 다음을 사용하세요.

• 이전/다음 달/연도/년 페이지로 전환하려면 스페이스 또는 Enter 키를 누르세요.

하위 헤더에 있는 월 버튼에 초점이 맞춰지면 다음을 사용하세요.

• 공간 또는 입력하다 전환할 키 months 보다.

​연도 버튼(하위 헤더에 있음)에 초점이 맞춰지면 다음을 사용하세요.

• 공간 또는 입력하다 전환할 키 years 보다.

Styling

Calendar 구성 요소는 거의 모든 내부 요소에 대해 CSS 부분을 노출합니다. 다음 표에는 Calendar에 의해 노출되는 모든 CSS 부분이 나열되어 있습니다.

이름	설명
머리글	헤더 요소입니다.
헤더 제목	헤더 제목 요소입니다.
헤더 날짜	헤더 날짜 요소입니다.
콘텐츠	보기 및 탐색 요소를 포함하는 콘텐츠 요소입니다.
항해	탐색 컨테이너 요소입니다.
월 탐색	월 탐색 버튼 요소입니다.
년 탐색	연도 탐색 버튼 요소입니다.
연도 범위	연도 범위 요소입니다.
탐색 버튼	탐색 버튼 컨테이너입니다.
탐색 버튼	이전/다음 탐색 버튼입니다.
일-뷰-컨테이너	일 보기 컨테이너 요소입니다.
일별 보기	일별 보기 요소입니다.
월별 보기	월 보기 요소입니다.
연도 보기	연도 보기 요소입니다.
일행	일수 행 요소입니다.
상표	주 헤더 레이블 요소입니다.
주 번호	주 번호 요소.
주 번호 내부	주 번호 내부 요소입니다.
날짜	날짜 요소.
데이트 내부	날짜 내부 요소.
첫 번째	처음 선택한 날짜 요소입니다.
마지막	마지막으로 선택한 날짜 요소입니다.
비활성	비활성 날짜 요소.
숨겨진	숨겨진 날짜 요소.
주말	주말 날짜 요소.
범위	선택한 요소의 범위를 지정합니다.
특별한	특수 날짜 요소.
장애가 있는	비활성화된 날짜 요소입니다.
하나의	단일 선택된 날짜 요소.
시사	범위 선택 미리보기 날짜 요소입니다.
월	월 요소.
월내	월 내부 요소.
년도	연도 요소.
연중	연도 내부 요소.
선택된	선택된 상태를 나타냅니다. 날짜, 월, 연도 요소에 적용됩니다.
현재의	현재 상태를 나타냅니다. 날짜, 월, 연도 요소에 적용됩니다.

이러한 CSS 부분을 사용하여 다음과 같이 Calendar 구성 요소의 모양을 사용자 정의할 수 있습니다.

igc-calendar::part(header) {
    background: #345779;
}

igc-calendar::part(date-inner selected),
igc-calendar::part(month-inner selected),
igc-calendar::part(year-inner selected) {
    background: #345779;
    border-color: #345779;
}

igc-calendar::part(date-inner current),
igc-calendar::part(navigation-button):hover,
igc-calendar::part(navigation-button):focus,
igc-calendar::part(months-navigation):hover,
igc-calendar::part(months-navigation):focus,
igc-calendar::part(years-navigation):hover,
igc-calendar::part(years-navigation):focus {
    color: #2dabe8;
}

igc-calendar::part(date-inner current selected),
igc-calendar::part(month-inner current selected),
igc-calendar::part(year-inner current selected) {
    box-shadow: inset 0 0 0 0.0625rem white, 0 0 0 0.0625rem #345779;
    color: white;
}

다음 샘플은 위의 CSS 구성을 보여줍니다.

API References

• IgcCalendarComponent
• IgcRadioComponent
• IgcRadioGroupComponent
• activeDate
• activeView
• After
• Before
• Between
• Change
• DateRangeDescriptor
• DateRangeType
• dateRange

Additional Resources

• Ignite UI for Web Components 포럼
• Ignite UI for Web Components GitHub