React Calendar Overview

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

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

    React Calendar Example

    The following React IgrCalendar component example shows a basic calendar with a single day selection mode. See how it works or inspect the code behind.

    How To Create a Calendar in React with Ignite UI

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

    npm install igniteui-react

    You will then need to import the Ignite UI for React IgrCalendar and its necessary CSS, like so:

    import { IgrCalendar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    Ignite UI for React에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    The simplest way to start using the Ignite UI for React IgrCalendar is as follows:

    <IgrCalendar />

    Selection Modes

    Users can choose from three different selection modes - single selection, multiple selection or range selection. By default, the Ignite UI for React IgrCalendar is using single selection mode but you can change it by setting the selection property as shown in this example.

    <IgrCalendar selection="multiple" />

    Range Selection

    Following the same approach, we can switch selection to range mode:

    <IgrCalendar selection="range" />

    Active View and Date

    The Ignite UI for React Calendar component allows you to switch between three different views: days, months and years. The activeView property of the component reflects the current view. By default, the Calendar displays the current date when loaded initially. You could modify this by setting the activeDate property. The activeDate property also reflects the changes of the currently visible date made by the end user.

    Week numbers

    You can use the showWeekNumbers property to show the week numbers of the Calendar component. You can do this by using its corresponding boolean attribute show-week-numbers like this:

    <IgrCalendar showWeekNumbers={true} />

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

    Multiple Months

    Using the visibleMonths property, you can display more than one month when the Calendar is in days view. When multiple months are displayed, you can configure whether you want to stack them vertically or horizontally by using the orientation property. By default, the orientation property is set to horizontal.

    The Calendar displays leading and trailing dates from the previous and the next months. You could hide these dates by setting the hideOutsideDays property to true or using its corresponding boolean attribute hideOutsideDays.

    <IgrCalendar visibleMonths={2} hideOutsideDays={true} />

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

    크기

    You could control the size and spacing of the calendar inner elements using the --ig-size CSS variable. The default size of the component is large.

    이벤트

    The Calendar component emits the Change event when the selected dates are changed by the end user. You can subscribe to the event like this:

    <IgrCalendar onChange={this.onCalendarChange} />

public onCalendarChange(e: IgrComponentDataValueChangedEventArgs) {

}

    키보드 탐색

    If you traverse the page using the TAB key you should keep in mind that based on W3 accessability recommendations the IgrCalendar introduces the following tab stops:

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

    When a day/month/year in the IgrCalendar component is focused, use:

    • PAGE UP 키를 눌러 이전 월/연도/연도 페이지로 이동합니다.
    • PAGE DOWN 키를 눌러 다음 월/연도/년 페이지로 이동합니다.
    • HOME 키를 눌러 현재 월의 첫날/보기의 첫 번째 달/보기의 첫 해에 초점을 맞춥니다.
    • END 키를 눌러 이번 달의 마지막 날/보기의 마지막 달/보기의 작년에 초점을 맞춥니다.
    • 일/월/년을 탐색하려면 화살표 키를 사용하세요. 첫 번째 항목 앞과 마지막 항목 뒤를 탐색하면 보기가 다음/이전 월/년/년 페이지로 전환됩니다.

    When a day inside the days view is focused, use:

    • SHIFT + PAGE UP 키를 눌러 이전 연도로 이동합니다.
    • SHIFT + PAGE DOWN 키를 눌러 다음 해로 이동합니다.
    • SPACE 또는 ENTER 키를 눌러 현재 집중된 요일을 선택합니다.

    When a month inside the months view is focused, use:

    • SPACE or ENTER key to change the activeDate to the currently focused month and switch to days view.

    When an year inside the years view is focused, use:

    • SPACE or ENTER key to change the activeDate to the currently focused year and switch to months view.

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

    • SPACE 또는 ENTER 키를 눌러 이전/다음 달/연도/년 페이지로 전환합니다.

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

    • SPACE or ENTER key to switch to months view.

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

    • SPACE or ENTER key to switch to years view.

    Styling

    The IgrCalendar component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:

    이름 설명
    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 현재 상태를 나타냅니다. 날짜, 월, 연도 요소에 적용됩니다.

    Using these CSS parts we can customize thе appearance of the IgrCalendar component like this:

    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 구성을 보여줍니다.

    API References

    Additional Resources