Angular 달력 구성 요소 개요

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

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

Angular Calendar Example

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

Getting Started with Ignite UI for Angular Calendar

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

ng add igniteui-angular

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

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

Note

​또한 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 {}

또는 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 {}

이제 Ignite UI for Angular 가져왔으므로 igx-calendar 구성 요소 사용을 시작할 수 있습니다.

Note

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

Using the Angular Calendar

Angular Single Selection Calendar

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

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

Angular Calendar Multiselect

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

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

Angular Calendar Range Picker

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

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

Note

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

Localization and Formatting

달력의 특성상 현지화와 서식 지정은 모든 달력에 필수적입니다. 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>

모든 속성 값은 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 };
}

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

How to Disable Dates 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 }];
    }
}

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

Special dates

​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);
        });

        ...
    }
}

<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>

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

Week numbers

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

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

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

Calendar Events

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

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

<!-- app.component.html -->
<igx-calendar #calendar
    (selected)="onSelection($event)"
    (viewDateChanged)="viewDateChanged($event)"
    (activeViewChanged)="activeViewChanged($event)">
</igx-calendar>

​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)
}

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

Angular Calendar Views

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

• Angular 달력 일 보기 -igx-days-view

• Angular 달력 월 보기 -igx-months-view

• Angular 달력 연도 보기 -igx-years-view

키보드 탐색

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

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

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

Note

​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에 초점을 맞추면 다음을 사용합니다.

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

Note

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

Multi View Calendar

멀티뷰 캘린더는 세 가지 유형의 선택을 모두 지원합니다. monthsViewNumber 입력을 사용하여 Flex 컨테이너에 가로로 표시되는 표시 월 수를 설정합니다. 설정된 최대값에는 제한이 없습니다. 멀티뷰 달력을 사용하는 동안 이번 달에 속하지 않는 날짜를 숨기고 싶을 수도 있습니다. hideOutsideDays 속성을 사용하면 이를 수행할 수 있습니다. 키보드 탐색은 보기에 있는 다음/이전 달로 이동합니다.

Calendar Orientation

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

머리글 방향 옵션:

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

뷰 방향 옵션:

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

Note

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

<igx-calendar [monthsViewNumber]="2" [headerOrientation]="headerOrientation" [orientation]="orientation"></igx-calendar>

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;
    }
}

스타일링

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

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

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

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

$custom-calendar-theme: calendar-theme(
  $header-background: #345779,
  $content-background: #fdfdfd,
  $header-text-color: #ffffff,
  $date-current-text-color: #2dabe8,
  $picker-arrow-color: #2dabe8,
  $date-selected-text-color: #fdfdfd,
  $date-current-bg-color: #fdfdfd,
  $picker-arrow-hover-color:  #345779,
  $year-current-text-color: #2dabe8,
  $year-hover-text-color: #2dabe8,
  $month-current-text-color: #2dabe8,
  $month-hover-text-color: #2dabe8,
  $picker-text-color: #2dabe8,
  $picker-text-hover-color:  #345779
);

Using CSS variables

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

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

Using Theme Overrides

Internet Explorer 11과 같은 이전 브라우저의 구성 요소에 스타일을 지정하려면 CSS 변수를 지원하지 않기 때문에 다른 접근 방식을 사용해야 합니다.

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다. 사용자 정의 테마가 다른 구성 요소에 유출되는 것을 방지하려면::ng-deep 앞에:host 선택기를 포함해야 합니다.

:host {
 ::ng-deep {
   @include calendar($custom-calendar-theme);
 }
}

API References

• IgxCalendar구성 요소
• IgxCalendarComponent 스타일
• 날짜 범위 유형
• 날짜 범위 설명자

Additional Resources

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

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub