Web Components 달력 개요

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

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

    Web Components 달력 예제

    다음 Web Components IgcCalendarComponent 구성 요소 예제에서는 단일 일 선택 모드가 있는 기본 달력을 보여 줍니다. 작동 방식을 확인하거나 코드 숨김을 검사하십시오.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    Ignite UI 사용하여 Web Components에서 캘린더를 만드는 방법

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

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

defineComponents(IgcCalendarComponent);
ts

    Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

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

    <igc-calendar></igc-calendar>
html

    선택 모드

    사용자는 단일 선택, 다중 선택 또는 범위 선택의 세 가지 선택 모드 중에서 선택할 수 있습니다. 기본적으로 Ignite UI for Web Components IgcCalendarComponent는 단일 선택 모드를 사용하지만 이 예제와 같이 속성을 설정하여 selection 변경할 수 있습니다.

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    범위 선택

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Active View 및 날짜

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

    헤더 옵션

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

    선택 항목이 여러 개로 설정된 경우 Ignite UI for Web Components 달력 헤더는 렌더링되지 않습니다.

    Ignite UI for Web Components Calendar DOM 속성은 camelCase 명명을 사용하는 반면 해당 HTML 속성은 kebab-case를 사용합니다. 예를 들어 headerOrientation 속성은 header-orientation 속성에 해당합니다.

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

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    현지화 및 서식 지정

    그 특성으로 인해 지역화 및 서식은 모든 달력에 필수적입니다. 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>
html
    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;
        }
    });
})
ts

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    비활성화된 날짜

    최종 사용자가 선택할 수 없는 달력의 날짜를 비활성화하려는 경우도 있습니다. 이 기능은 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 }];
ts

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    특별한 날짜

    ​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 }];
ts

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    주 번호

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

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    여러 달

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

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

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    크기

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    이벤트

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

    this.calendar.addEventListener('igcChange', ev => console.log(ev.detail));
ts
    Ignite UI for Web Components | CTA 배너

    키보드 탐색

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    스타일링

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

    이름 설명
    header 헤더 요소입니다.
    header-title 헤더 제목 요소입니다.
    header-date 헤더 날짜 요소입니다.
    content 보기 및 탐색 요소를 포함하는 콘텐츠 요소입니다.
    navigation 탐색 컨테이너 요소입니다.
    months-navigation 월 탐색 버튼 요소입니다.
    years-navigation 연도 탐색 버튼 요소입니다.
    years-range 연도 범위 요소입니다.
    navigation-buttons 탐색 버튼 컨테이너입니다.
    navigation-button 이전/다음 탐색 버튼입니다.
    days-view-container 일 보기 컨테이너 요소입니다.
    days-view 일별 보기 요소입니다.
    months-view 월 보기 요소입니다.
    years-view 연도 보기 요소입니다.
    days-row 일수 행 요소입니다.
    label 주 헤더 레이블 요소입니다.
    week-number 주 번호 요소.
    week-number-inner 주 번호 내부 요소입니다.
    date 날짜 요소.
    date-inner 날짜 내부 요소.
    first 처음 선택한 날짜 요소입니다.
    last 마지막으로 선택한 날짜 요소입니다.
    inactive 비활성 날짜 요소.
    hidden 숨겨진 날짜 요소.
    weekend 주말 날짜 요소.
    range 선택한 요소의 범위를 지정합니다.
    special 특수 날짜 요소.
    disabled 비활성화된 날짜 요소입니다.
    single 단일 선택된 날짜 요소.
    preview 범위 선택 미리보기 날짜 요소입니다.
    month 월 요소.
    month-inner 월 내부 요소.
    year 연도 요소.
    year-inner 연도 내부 요소.
    selected 선택된 상태를 나타냅니다. 날짜, 월, 연도 요소에 적용됩니다.
    current 현재 상태를 나타냅니다. 날짜, 월, 연도 요소에 적용됩니다.

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

    igc-calendar::part(date-inner selected),
igc-calendar::part(month-inner selected),
igc-calendar::part(year-inner selected),
igc-calendar::part(month-inner selected):focus,
igc-calendar::part(year-inner selected):focus {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
}

igc-calendar::part(date-inner selected):hover,
igc-calendar::part(month-inner selected):hover,
igc-calendar::part(year-inner selected):hover {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
}

igc-calendar::part(label),
igc-calendar::part(navigation-button),
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: var(--ig-primary-300);
}

igc-calendar::part(navigation-button):hover,
igc-calendar::part(navigation-button):focus {
  color: var(--ig-primary-800);
}
css

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

    EXAMPLE
    TS
    HTML
    CalendarStyling.css
    index.css
    Edit in:

    API 참조

    추가 리소스