React Calendar Overview

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

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

React Calendar Example

다음 React IgrCalendar 구성 요소 예제는 단일 일 선택 모드가 있는 기본 달력을 보여줍니다. 작동 방식을 보거나 코드 뒤에 있는 내용을 검사하세요.

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCalendar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default class CalendarOverview extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrCalendar style={{width: '400px'}}/>                
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CalendarOverview/>);
tsxコピー

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

How To Create a Calendar in React with Ignite UI

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

npm install igniteui-react
cmd

그런 다음 다음과 같이 Ignite UI for React IgrCalendar와 필요한 CSS를 가져와야 합니다.

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

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

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

<IgrCalendar />
tsx

Selection Modes

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

<IgrCalendar selection="multiple" />
tsx

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCalendar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default class CalendarMultipleSelection extends React.Component<any, any> {

    constructor(props: any) {
        super(props);                    
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrCalendar selection="multiple" style={{width: '400px'}}/>                
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CalendarMultipleSelection/>);
tsxコピー

Edit in: Codesandbox

Range Selection

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

<IgrCalendar selection="range" />
tsx

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCalendar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default class CalendarRangeSelection extends React.Component<any, any> {    

    constructor(props: any) {
        super(props);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrCalendar selection='range' style={{width: '400px'}}/>                
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CalendarRangeSelection/>);
tsxコピー

Edit in: Codesandbox

Active View and Date

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

Week numbers

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

<IgrCalendar showWeekNumbers={true} />
tsx

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCalendar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default class CalendarWeekNumbers extends React.Component<any, any> {

    constructor(props: any) {
        super(props);                      
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrCalendar showWeekNumbers={true} style={{width: '400px'}}/>                
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CalendarWeekNumbers/>);
tsxコピー

Edit in: Codesandbox

Multiple Months

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

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

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

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCalendar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default class CalendarMultipleMonths extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrCalendar visibleMonths={2} hideOutsideDays={true} style={{width: '600px'}}/>                
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CalendarMultipleMonths/>);
tsxコピー

Edit in: Codesandbox

크기

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

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCalendar, IgrRadioGroup, IgrRadio } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default class CalendarSize extends React.Component<any, any> {

    constructor(props: any) {
        super(props);                
        this.onRadioChange = this.onRadioChange.bind(this);
        this.state = { calendarSize: "large"};        
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrRadioGroup alignment="horizontal" style={{ marginBottom: '10px' }}>
                    <IgrRadio name="size" value="small" 
                        checked={this.state.calendarSize === "small"} 
                        onChange={this.onRadioChange}>
                        <span>Small</span>
                    </IgrRadio>
                    <IgrRadio name="size" value="medium" 
                        checked={this.state.calendarSize === "medium"} 
                        onChange={this.onRadioChange}>
                        <span>Medium</span>
                    </IgrRadio>
                    <IgrRadio name="size" value="large" 
                        checked={this.state.calendarSize === "large"} 
                        onChange={this.onRadioChange}>
                        <span>Large</span>
                    </IgrRadio>
                </IgrRadioGroup>
                <IgrCalendar className={'size-' + this.state.calendarSize} style={{width: '400px'}}/>                
            </div>
        );
    }

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

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CalendarSize />);
tsxコピー

.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}cssコピー

Edit in: Codesandbox

이벤트

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

<IgrCalendar onChange={this.onCalendarChange} />

public onCalendarChange(e: IgrComponentDataValueChangedEventArgs) {

}
tsx

키보드 탐색

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 공간 또는 입력하다 전환할 키 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

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

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './CalendarStyling.css';
import { IgrCalendar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default class CalendarStyling extends React.Component<any, any> {

    constructor(props: any) {
        super(props);                    
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrCalendar style={{width: '400px'}}/>                
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CalendarStyling/>);
tsxコピー

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: #446418;
    border-color: #446418;
}

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

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: #7d9b5d;
}

igc-calendar::part(navigation-button):hover,
igc-calendar::part(navigation-button):focus {
    color: #446418;
}
cssコピー

Edit in: Codesandbox

API References

• IgrCalendar
• IgrRadio
• IgrRadioGroup
• activeDate
• activeView
• DateRangeDescriptor
• dateRange
• Styling & Themes

Additional Resources

• Ignite UI for React Forums
• Ignite UI for React GitHub