Angular Calendar 구성 요소 개요

    Angular Calendar는 앱에서 날짜와 요일을 표시하는 데 사용되는 UI 구성 요소입니다. 다양한 기능을 지원하여 사용자가 캘린더 기능을 쉽게 관리하고, 캘린더에서 이벤트를 끌어서 만들고, 캘린더에서 원하는 날짜로 이동하고, 한 번의 클릭으로 Angular 캘린더 월별 보기, 주별 보기 또는 일별 보기에서 이벤트를 표시할 수 있습니다.

    기본 Angular 구성 요소로 개발된 Ignite UI for Angular Calendar 구성 요소는 날짜 정보를 표시하거나, 날짜를 활성화하거나, 달력 비활성화 날짜 모드를 적용 Angular 쉽고 직관적인 방법을 제공합니다. 사용자는 단일 선택, 다중 선택 또는 범위 선택의 세 가지 선택 모드 중에서 선택할 수 있습니다.

    Angular 달력 예

    Ignite UI for Angular Calendar 패키지를 사용하여 다음 Angular Calendar 예제를 만들었습니다. 기본 달력이 어떻게 보이고 느껴지는지, 사용자가 단일 날짜를 선택하고 강조 표시하는 방법, 특정 날짜로 앞뒤로 이동하는 방법을 빠르게 보여줍니다.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    Ignite UI for Angular 캘린더 시작하기

    Ignite UI for Angular Calendar 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

    ng add igniteui-angular
cmd

    Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

    다음 단계는 IgxCalendarModule 당신의 app.module.ts 파일.

    ​또한 IgxCalendarComponent는 터치 상호 작용에 따라 달라 BrowserAnimationsModule 지며 선택​ ​HammerModule 적으로 AppModule에도 추가해야 합니다.

    // app.module.ts
...
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxCalendarModule } from 'igniteui-angular';
// import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., BrowserAnimationsModule, HammerModule, IgxCalendarModule],
    ...
})
export class AppModule {}
typescript

    또는 16.0.0부터 IgxCalendarComponent 독립 실행형 종속성으로 가져오거나 IGX_CALENDAR_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시문을 가져올 수 있습니다.

    // home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IGX_CALENDAR_DIRECTIVES } from 'igniteui-angular';
// import { IGX_CALENDAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-calendar></igx-calendar>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [BrowserAnimationsModule, HammerModule, IGX_CALENDAR_DIRECTIVES]
    /* or imports: [BrowserAnimationsModule, HammerModule, IgxCalendarComponent] */
})
export class HomeComponent {}
typescript

    이제 Ignite UI for Angular Calendar 모듈 또는 지시문을 가져왔으므로 구성 요소를 사용할 igx-calendar 수 있습니다.

    ​IgxCalendarComponent는 날짜 현지화 및 형식화를 위해 Intl Web API를 사용합니다. 대상 플랫폼이 이를 지원하지 않는 경우 적절한 폴리필 사용을 고려하세요.

    Angular Calendar 사용

    Angular 단일 선택 달력

    ​IgxCalendarComponent를 인스턴스화하는 것은 선택기 요소를 템플릿에 배치하는 것만큼 쉽습니다. 그러면 단일 선택 달력 모드에서 이번 달이 표시됩니다.

    <!-- app.component.html -->
<!-- Single selection mode -->
<igx-calendar></igx-calendar>
html

    Angular 캘린더 다중 선택

    ​selection 속성을 사용하여 기본 모드를 쉽게 변경할 수 있습니다.

    <!-- app.component.html -->
<!-- Multi selection mode -->
<igx-calendar selection="multi" [showWeekNumbers]="true"></igx-calendar>
html

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Angular 달력 범위 선택기

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

    <!-- app.component.html -->
<!-- Range selection mode -->
<igx-calendar selection="range"></igx-calendar>
html

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    선택 항목이 multi 또는 range 인 경우 달력 헤더가 렌더링되지 않습니다.

    현지화 및 서식 지정

    달력의 특성상 현지화와 서식 지정은 모든 달력에 필수적입니다. IgxCalendarComponent에서 이는 locale, formatOptions, formatViews, weekStart 속성을 통해 제어되고 사용자 정의됩니다.

    계속해서 IgxCalendarComponent API의 다른 사용자 정의와 함께 이를 시도해 보겠습니다. 가장 먼저 설정해야 할 것은 한 주의 시작일을 제어하는 weekStart 입니다. 기본값은 일요일에 해당하는 0이므로 월요일에 값을 1로 설정하겠습니다. 아래 마크업에서는 formatOptions 및 formatViews 속성을 바인딩하여 표시 형식을 사용자 지정합니다. 마지막으로 사용자의 위치 선택에 따라 locale 속성을 값에 바인딩합니다.

    <!-- app.component.html -->
<igx-select #select [(ngModel)]="locale">
    <igx-select-item *ngFor="let locale of locales" [value]="locale">
        {{ locale }}
    </igx-select-item>
</igx-select>

<igx-calendar #calendar
    [weekStart]="1"
    [locale]="locale"
    [formatOptions]="formatOptions"
    [formatViews]="formatViews">
</igx-calendar>
html

    모든 속성 값은 AppComponent 파일에서 설정되어야 합니다.

    // app.component.ts
@ViewChild('calendar', { read: IgxCalendarComponent }) public calendar: IgxCalendarComponent;

public formatOptions: any;
public formatViews: any;
public locales = ['EN', 'DE', 'FR', 'AR', 'ZH'];
public locale = 'EN';

public ngOnInit() {
    this.formatOptions = { day: '2-digit', month: 'long', weekday: 'long', year: 'numeric' };
    this.formatViews = { day: true, month: true, year: true };
}
typescript

    모든 것이 순조롭게 진행되었다면 이제 사용자 정의된 날짜 표시가 있는 달력이 생기고 사용자 위치에 따라 로케일 표현도 변경됩니다. 그것을 살펴보자:

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Angular Calendar에서 날짜를 비활성화하는 방법

    이 섹션에서는 disabledDates 기능의 사용법을 보여줍니다. 이를 위해 다양한 단일 날짜 또는 범위를 배열에 추가한 다음 disabledDates 설명자에 전달할 수 있습니다.

    ​DateRangeType은 비활성화할 범위를 지정하는 데 사용됩니다.

    이번 달 3일과 8일 사이의 날짜를 비활성화하는 샘플을 만들어 보겠습니다.

    export class CalendarSample6Component {
    @ViewChild('calendar') public calendar: IgxCalendarComponent;
    public today = new Date(Date.now());
    public range = [
        new Date(this.today.getFullYear(), this.today.getMonth(), 3),
        new Date(this.today.getFullYear(), this.today.getMonth(), 8)
    ];

    public ngOnInit() {
        this.calendar.disabledDates = [{ type: DateRangeType.Between, dateRange: this.range }];
    }
}
typescript

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    특별한 날짜

    ​specialDates 기능은 disabledDates와 거의 동일한 구성 원칙을 사용합니다. specialDates 선택하고 집중하는 기능은 disabled 기능과 다릅니다.

    ​igxCalendar에 몇 가지 specialDates 추가해 보겠습니다. 이를 수행하려면 DateRangeType.Specific 유형의 DateRangeDescriptor 항목을 생성하고 날짜 배열을 dateRange로 전달해야 합니다.

    export class CalendarSample7Component {
    @ViewChild('calendar', { static: true })
    public calendar: IgxCalendarComponent;
    @ViewChild('alert', { static: true })
    public dialog: IgxDialogComponent;
    public range = [];

    public selectPTOdays(dates: Date[]) {
        this.range = dates;
    }

    public submitPTOdays(eventArgs) {
        this.calendar.specialDates =
            [{ type: DateRangeType.Specific, dateRange: this.range }];

        this.range.forEach((item) => {
            this.calendar.selectDate(item);
        });

        ...
    }
}
typescript
    <igx-calendar #calendar weekStart="1"
    selection="multi"
    (selected)="selectPTOdays($event)">
</igx-calendar>
<igx-dialog #alert title="Request Time Off"
    leftButtonLabel="OK"
    (leftButtonSelect)="alert.close()">
</igx-dialog>
<button igxButton="contained" (click)="submitPTOdays($event)">Submit Request</button>
html

    다음 데모에서는 휴가 요청 옵션이 있는 달력을 보여줍니다.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    주 번호

    이제 showWeekNumbers 입력을 사용하여 Calendar 및 DatePicker 구성 요소 모두의 주 번호를 표시할 수 있습니다.

    
<!-- app.component.html -->
<igx-calendar selection="multi" [showWeekNumbers]="true"></igx-calendar>
html

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    캘린더 이벤트

    달력에서 발생하는 이벤트를 살펴보겠습니다.

    • selected- 달력에서 날짜를 선택할 때 내보냅니다.
    • viewDateChanged- 제시된 월/연도가 변경될 때마다 생성됩니다(예: next 또는 previous 달로 이동한 후).
    • activeViewChanged- 활성 보기가 변경된 후(예: 사용자가 헤더의 month 또는 year 섹션을 클릭한 후) 발생합니다.
    <!-- app.component.html -->
<igx-calendar #calendar
    (selected)="onSelection($event)"
    (viewDateChanged)="viewDateChanged($event)"
    (activeViewChanged)="activeViewChanged($event)">
</igx-calendar>
html

    ​selected 이벤트는 입력 검증 로직을 구축하는 데 적합합니다. 선택 항목이 5일을 초과하면 아래 코드를 사용하여 사용자에게 경고한 다음 선택 항목을 재설정합니다.

    // app.component.ts
...
public onSelection(dates: Date[]) {
    if (dates.length > 5) {
        this.calendar.selectedDates = [];
        // alert the user
    }
}
public viewDateChanged(event: IViewDateChangeEventArgs) {
    // use event.previousValue to get previous month/year that was presented.
    // use event.currentValue to get current month/year that is presented.
}

public activeViewChanged(event: CalendarView) {
    // use CalendarView[event] to get the current active view (DEFAULT, YEAR or DECADE)
}
typescript

    아래 데모를 사용하여 실험해 보고(선택 변경, 월 및 연도 탐색) 실시간으로 기록된 이벤트를 확인하세요.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    App Builder | CTA 배너

    Angular 달력 뷰

    독립적으로 사용할 수 있는 IgxCalendarModule에서 제공하는 별도의 뷰가 있습니다.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    키보드 탐색

    ​Tab 키를 사용하여 페이지를 트래버스하는 경우 W3 접근성 권장 사항에 따라 igxCalendarComponent에 다음과 같은 탭 정지가 도입된다는 점을 명심해야 합니다.

    • 지난달 버튼
    • 월 선택 버튼
    • 연도 선택 버튼
    • 다음 달 버튼
    • 선택한 날짜, 현재 날짜, 일별 보기에서 첫 번째 포커스 가능(비활성화 아님) 날짜

    선택한 날짜가 두 개 이상 포함된 Angular 캘린더에서는 첫 번째 날짜만 탭 정지로 도입됩니다. 예를 들어 Angular 캘린더 다중 선택이 활성화되어 있고 날짜를 선택한 경우: 13/10/2020,17​ ​/10/2020 및 21/10/2020 탭 탐색 중에는 13/10/2020 에만 액세스할 수 있습니다. Angular 달력 범위 선택기에서는 선택한 범위의 첫 번째 날짜만 페이지 탭 시퀀스의 일부가 됩니다.

    ​v10.2.0의 동작 변경 -일 보기의 탭 키 탐색을 더 이상 사용할 수 없습니다. 날짜 보기에서 날짜 사이를 이동하려면 화살표 키를 사용해야 합니다.

    ​igxCalendar 구성요소에 초점이 맞춰지면 다음을 사용하세요.

    • 이전 달로 이동하는 PageUp 키,
    • PageDown 키를 누르면 다음 달로 이동하고,
    • 이전 연도로 이동하려면 Shift + PageUp 키,
    • 다음 연도로 이동하려면 Shift + PageDown 키를 사용하고,
    • 현재 달의 첫날 또는 보기의 첫 번째 달에 초점을 맞추는 홈 키
    • 현재 달의 마지막 날 또는 지난 달의 보기에 초점을 맞추는 종료 키

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

    • 다음 달 또는 이전 달 보기로 스크롤하려면 스페이스바 또는 Enter 키를 누르세요.

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

    • 월별 보기를 열려면 Space 또는 Enter 키를 누르세요.

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

    • 10년 보기를 열려면 Space 또는 Enter 키를 누르세요.

    당월 내의 day에 초점이 맞춰진 경우:

    • 날짜를 탐색하려면 화살표 키를 사용하세요. 참고: 비활성화된 날짜는 건너뜁니다.
    • 포커스는 뷰에 있는 이번 달에 유지되며, 해당 달의 마지막 날 / 1일​부터 /까지 탐색됩니다.
    • kb 탐색은 연속적입니다. 즉, 화살표를 사용하여 탐색하는 동안 모든 달을 통과하게 됩니다.
    • 현재 집중하고 있는 날짜를 선택하려면 Enter 키를 사용하세요.

    월 보기 내의 한 month에 초점이 맞춰지면 다음을 사용하세요.

    • 월을 탐색하려면 화살표 키를 사용하세요.
    • 월 보기 내에서 첫 번째 달에 초점을 맞추는 홈 키입니다.
    • 월 보기 내에서 마지막 달에 초점을 맞추는 종료 키입니다.
    • 현재 초점이 맞춰진 월을 선택하고 보기를 닫으려면 키를 입력하세요.

    10년 보기 내의 year에 초점을 맞추면 다음을 사용합니다.

    • 위쪽 화살표 및 아래쪽 화살표 키를 사용하여 연도를 탐색할 수 있습니다.
    • 현재 초점을 맞춘 연도를 선택하고 보기를 닫으려면 키를 입력하세요.

    버전 8.2.0 이후 키보드 탐색에서는 이번 달이 아닌 날짜에 초점을 맞추지 않고 표시된 달을 변경합니다.

    멀티뷰 캘린더

    다중 보기 달력은 세 가지 유형의 선택을 모두 지원합니다. 입력을 monthsViewNumber 사용하여 표시되는 개월 수를 설정하면 플렉스 컨테이너에 가로로 표시됩니다. 설정된 최대값에는 제한이 없습니다. 다중 보기 달력을 사용하는 동안 현재 달에 속하지 않는 날짜를 숨길 수 있습니다. 당신은 재산으로 hideOutsideDays 그것을 할 수 있습니다. 키보드 탐색은 다음/이전 달이 표시되면 해당 달로 이동합니다.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    달력 방향

    방향 설정을 통해 사용자는 달력의 머리글과 보기가 표시되는 방식을 선택할 수 있습니다.

    머리글 방향 옵션:

    머리글 방향을 변경하여 달력의 머리글을 가로(달력 보기 위) 또는 세로(달력 보기의 측면)로 배치할 수 있습니다. 이렇게 [headerOrientation] 하려면 속성을 사용하여 각각 horizontal 또는 vertical

    뷰 방향 옵션:

    달력에 월을 가로(나란히) 또는 세로로(서로 위에) 배치하도록 보기 방향을 설정할 수 있습니다. 이렇게 [orientation] 하려면 속성을 사용하여 각각 or vertical로 horizontal 설정합니다.

    해당 속성이 작동하는지 확인하려면 최소 2개월 보기 달력이 필요합니다.

    <igx-calendar [monthsViewNumber]="2" [headerOrientation]="headerOrientation" [orientation]="orientation"></igx-calendar>
html
    const orientations = ["horizontal", "vertical"] as const;
type Orientation = (typeof orientations)[number];

export class CalendarSample9Component {
    protected orientations = Array.from(orientations, (o) => o);
    protected headerOrientation: Orientation = "horizontal";
    protected orientation: Orientation = "horizontal";

    protected setHeaderOrientation(orientation: Orientation) {
        this.headerOrientation = orientation;
    }

    protected setOrientation(orientation: Orientation) {
        this.orientation = orientation;
    }
}
typescript

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    스타일링

    달력 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

    가장 간단한 접근 방식에 따라 calendar-theme 확장하고 기본 테마의 매개변수 중 일부를 허용하는 새 테마를 만듭니다.

    $custom-calendar-theme: calendar-theme(
  $header-background: #345779,
  $content-background: #fdfdfd,
  $header-foreground: #ffffff,
  $date-current-foreground: #2dabe8,
  $navigation-color: #2dabe8,
  $date-selected-foreground: #fdfdfd,
  $date-current-background: #fdfdfd,
  $navigation-hover-color: #345779,
  $ym-current-foreground: #2dabe8,
  $ym-hover-foreground: #2dabe8,
  $picker-foreground: #2dabe8,
  $picker-hover-foreground: #345779,
);
scss

    마지막 단계는 사용자 정의 캘린더 테마를 전달하는 것입니다.

     @include css-vars($custom-calendar-theme);
scss

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    API 참조

    추가 리소스

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.