React Calendar Overview

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

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

    React Calendar Example

    다음 ReactIgrCalendar 구성 요소 예시는 단일 날짜 선택 모드를 가진 기본 달력을 보여줍니다. 작동 방식을 확인하거나 뒤에 있는 코드를 살펴보세요.

    How To Create a Calendar in React with Ignite UI

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

    npm install igniteui-react

    그 후 Ignite UI for ReactIgrCalendar와 필요한 CSS를 이렇게 불러와야 합니다:

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

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

    Ignite UI for ReactIgrCalendar을 사용하는 가장 간단한 방법은 다음과 같습니다:

    <IgrCalendar />

    Selection Modes

    사용자는 단일 선택, 다중 선택 또는 범위 선택 등 세 가지 선택 모드 중에서 선택할 수 있습니다. 기본적으로 Ignite UI for ReactIgrCalendar은 단일 선택 모드를 사용하지만, 이 예시처럼 속성을 설정selection 하여 변경할 수 있습니다.

    <IgrCalendar selection="multiple" />

    Range Selection

    같은 방법을 따라 거리 모드로 전환selection 할 수 있습니다:

    <IgrCalendar selection="range" />

    Active View and Date

    Ignite UI for React 캘린더 구성 요소는 일, 월, 연도 세 가지 보기 사이를 전환할 수 있게 해줍니다. 컴포넌트의 속성은activeView 현재 시점을 반영합니다. 기본적으로 캘린더는 처음 로드될 때 현재 날짜를 표시합니다. 이 기능을 설정하여 수정할 수 있습니다.activeDate이 속성은activeDate 또한 최종 사용자가 현재 가시되는 날짜의 변경을 반영합니다.

    Header Options

    기본적으로 Ignite UI for React 캘린더 컴포넌트는 선택된 날짜에 대한 정보를 포함하는 헤더 영역을 렌더링합니다. 헤더를 숨기려면 다음 설정을 하면 됩니다HasHeader property를 거짓. 또한 설정할 수도 있습니다vertical 또는horizontal 헤더의 방향 방향headerOrientation 재산.

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

    [!Note] Please note that the Ignite UI for React 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 React 캘린더 컴포넌트는 헤더 제목을 커스터마이즈할 수 있는 슬롯을 제공합니다title.

    <IgrCalendar selection="range" headerOrientation="vertical">
    <span slot="title">Trip dates</span>
</IgrCalendar>

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

    Localization and Formatting

    현지화와 형식은 어떤 달력에도 필수적입니다. Ignite UI for ReactIgrCalendar 에서는 다음 속성들로 제어되고 맞춤화됩니다 -locale,formatOptions,.weekStart​

    이제 그들과 다른 커스터마이징 기능들을 함께 시도해 봅시다. 가장 먼저 설정해야 할 것은 주 시작일을 제어하는 '입니다weekStart. 기본값은 이Sunday 므로, 우리는 로Monday 설정합니다. 또한 달력 뷰에서 월과 주일을 포맷하는 옵션을 지정하는 속성도formatOptions 커스터마이즈할 예정입니다. 마지막으로, 사용자의 위치 선택에 따라 속성을 값으로 설정합니다locale:

    <IgrRadioGroup alignment="horizontal" value={this.state.calendarLocale}>
    <IgrRadio name="lang" value="en" checked={true} onChange={this.onRadioChange}>
        <span>EN</span>
    </IgrRadio>
    <IgrRadio name="lang" value="de" onChange={this.onRadioChange}>
        <span>DE</span>
    </IgrRadio>
    <IgrRadio name="lang" value="fr" onChange={this.onRadioChange}>
        <span>FR</span>
    </IgrRadio>
    <IgrRadio name="lang" value="ar" onChange={this.onRadioChange}>
        <span>AR</span>
    </IgrRadio>
    <IgrRadio name="lang" value="ja" onChange={this.onRadioChange}>
        <span>JA</span>
    </IgrRadio>                    
</IgrRadioGroup>

<IgrCalendar weekStart='monday' formatOptions={this.state.calendarFormat} 
    locale={this.state.calendarLocale}
    value={new Date()}/>

    constructor(props: any) {
    super(props);
    this.onRadioChange = this.onRadioChange.bind(this);
    const formatOptions: IgrCalendarFormatOptions = {
        month: 'short',
        weekday: 'short',
    }
    this.state = { calendarLocale: "en", calendarFormat: formatOptions };
}

public onRadioChange(e: any) {
    if (e.detail.checked) {
        this.setState({ calendarLocale: e.detail.value });
    }
}

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

    Disabled dates

    경우에 따라 최종 사용자가 선택할 수 없는 날짜를 비활성화하는 것이 필요할 수도 있습니다. 이 기능은 속성을disabledDates 사용하여 달성됩니다. 속성은disabledDates 객체들의 배열DateRangeDescriptor 입니다. 각 디스크립터는 aType와 선택적으로 adateRange를 가지며, a는 객체들의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 }];

    <IgrCalendar disabledDates={this.state.disabledDates}/>

    const today = new Date();
const range = [
    new Date(today.getFullYear(), today.getMonth(), 3),
    new Date(today.getFullYear(), today.getMonth(), 8)
];
const desc: DateRangeDescriptor = {
    dateRange: range,
    type: DateRangeType.Specific,
}
const disabledDates = [desc];
this.state = { disabledDates };

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

    Special dates

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

    달력에 특별한 날짜를 추가해 봅시다. 이를 위해 aDateRangeDescriptor를 만들고 현재 달 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 }];

    <IgrCalendar specialDates={this.state.specialDates}/>

    const today = new Date();
const range = [
    new Date(today.getFullYear(), today.getMonth(), 3),
    new Date(today.getFullYear(), today.getMonth(), 8)
]
const desc: DateRangeDescriptor = {
    dateRange: range,
    type: DateRangeType.Between,
}
const specialDates = [desc]
this.state = { specialDates };

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

    Week numbers

    캘린더 컴포넌트의 주 번호를 표시하는 데 이showWeekNumbers 속성을 사용할 수 있습니다. 해당 불리언 속성을show-week-numbers 다음과 같이 사용하면 됩니다:

    <IgrCalendar showWeekNumbers={true} />

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

    Multiple Months

    이 속성을 사용하면visibleMonths 달력이days 보이는 동안 한 달 이상을 표시할 수 있습니다. 여러 달이 표시될 때는 속성을 사용orientation 해 수직 또는 가로로 쌓을지 설정할 수 있습니다. 기본적으로 속성은orientation로horizontal 설정되어 있습니다.

    달력에는 전월과 다음 달의 선행 및 뒤쪽 날짜가 표시됩니다. 이 날짜들을 숨기려면hideOutsideDays property를 참 또는 해당 불리언 속성을 사용하여hideOutsideDays.

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

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

    크기

    CSS 변수를 사용해--ig-size 달력 내부 요소의 크기와 간격을 조절할 수 있었습니다. 컴포넌트의 기본 크기는 크다.

    이벤트

    캘린더 컴포넌트는 최종 사용자가 선택한 날짜를 변경할 때 이벤트를 발Change 송합니다. 이렇게 행사를 구독하실 수 있습니다:

    <IgrCalendar onChange={this.onCalendarChange} />

public onCalendarChange(e: IgrComponentDataValueChangedEventArgs) {

}

    키보드 탐색

    키를 사용해 TAB 페이지를 탐색할 때는 W3 접근성 권장 사항에​IgrCalendar 따라 다음과 같은 탭 스톱을 도입한다는 점을 기억해야 합니다:

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

    그때 일/월/년 안에IgrCalendar 컴포넌트가 집중되어 있으며, 다음을 사용하세요:

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

    하 루가 시야 안에days 집중되었을 때, 다음을 사용하세요:

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

    한 달 동안 뷰에months 초점이 맞춰졌을 때, 다음을 사용하세요:

    • SPACE 또는 ENTER 키를 통해 현재 집중된 달로 바꾸activeDate 고 보기로days 전환할 수 있습니다.

    그때 년 그 안에서years 뷰는 초점이 맞춰져 있으니 다음을 사용하세요:

    • SPACE 또는 ENTER 키를 통해 현재activeDate 집중하는 연도로 바꾸고 보기로months 전환할 수 있습니다.

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

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

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

    • SPACE 또는 ENTER 보기 전환months을 위한 키 사용.

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

    • SPACE 또는 ENTER 보기 전환years을 위한 키 사용.

    Styling

    컴포넌트는IgrCalendar 내부 요소의 거의 모든 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 부품들을 사용하면 컴포넌트의IgrCalendar 외관을 다음과 같이 커스터마이즈할 수 있습니다:

    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