React Calendar Overview

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

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

    React Calendar Example

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

    How To Create a Calendar in React with Ignite UI

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

    npm install igniteui-react

    그런 다음 Ignite UI for React 가져와야 합니다. IgrCalendar, 필요한 CSS를 작성하고 다음과 같이 모듈을 등록합니다.

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

IgrCalendarModule.register();

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

    Ignite UI for React 사용을 시작하는 가장 간단한 방법 IgrCalendar 다음과 같다:

    <IgrCalendar />

    Selection Modes

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

    <IgrCalendar selection="multiple" />

    Range Selection

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

    <IgrCalendar selection="range" />

    Active View and Date

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

    Week numbers

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

    <IgrCalendar showWeekNumbers={true} />

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

    Multiple Months

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

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

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

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

    크기

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

    이벤트

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

    <IgbCalendar change={this.onCalendarChange} />

public onCalendarChange(calendar: IgrCalendar, e: IgrComponentDataValueChangedEventArgs) {

}

    키보드 탐색

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

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

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

    • 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

    Additional Resources