Angular Calendar 구성 요소 개요

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

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

    Angular Calendar Example

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

    Getting Started with Ignite UI for Angular Calendar

    Ignite UI for Angular Calendar 구성 요소를 시작하려면 먼저 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 날짜의 현지화 및 서식 지정에 국제 웹 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

    선택 항목이 '또는 'ormulti 하나range '일 때는 달력 헤더가 렌더링되지 않는 점을 주목하세요.

    Localization and Formatting

    현지화와 형식은 어떤 달력에도 필수적입니다. 이 기능들은IgxCalendarComponent 다음 속성들로 제어되고 맞춤화됩니다 -locale,formatOptions,formatViews,.weekStart​

    이제 그들과 함께 다른 커스터마이징IgxCalendarComponent API 기능들을 시도해 봅시다. 가장 먼저 설정해야 할 것은 주 시작일을 제어하는 '입니다weekStart. 기본값은 0이며, 이는 일요일에 해당하므로 월요일에는 1로 값을 설정합니다. 아래 마크업에서는 andformatOptions 속성을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 다른 사람들과 구분 짓는 점입니다.

    우리 이야기에 좀specialDates​igxCalendar 더해보자. 이를 위해 타입DateRangeDescriptor 항목을 생성DateRangeType.Specific 하고 날짜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 해 달력과 날짜 선택자 구성 요소 모두의 주 번호를 표시할 수 있습니다.

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

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

    Calendar Events

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

    • selected- 달력에서 날짜를 선택할 때 발음됨.
    • viewDateChanged- 표시된 월/연도가 변경될 때마다 발음됨 - 예를 들어 ORnext 월로previous 이동한 후.
    • activeViewChanged- 활성 뷰가 변경된 후 방출됨 - 예를 들어 사용자가 헤더의 ORmonth 섹션을 클릭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가 제공됩니다:

    키보드 탐색

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

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

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

    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 사용해 표시되는 월 수를 설정하며, 이는 플렉스 컨테이너에 수평으로 표시됩니다. 최대 값 설정에는 제한이 없습니다. 멀티뷰 달력을 사용할 때는 현재 달에 속하지 않는 날짜를 숨기고 싶을 수도 있습니다. 부동산으로hideOutsideDays 그렇게 할 수 있습니다. 키보드 탐색은 다음 달이나 이전 달로 옮겨가고, 그때는 그게 시야에 들어갑니다.

    Calendar Orientation

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

    Header Orientation Options

    헤더 방향을 변경하여 달력 헤더를 가로(달력 뷰 위) 또는 세로(달력 뷰 옆)로 배치할 수 있습니다. 이를 위해 속성을[headerOrientation] 사용해 각각 또는horizontal​vertical

    View Orientation Options

    달력의 달을 가로(나란히) 또는 세로(위로)로 배치할 수 있도록 뷰 방향을 설정할 수 있습니다. 그렇게 하려면 속성을[orientation] 사용해 각각 또는 또는horizontal로vertical 설정하세요.

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

    스타일링

    Calendar Theme Property Map

    and$header-background 속성을 수정$content-background 하면 관련된 모든 테마 속성이 자동으로 조정되어 캘린더 컴포넌트 스타일이 일관되게 조정됩니다. 아래 표에서 어떤 테마 속성이 영향을 받는지 자세히 살펴보세요.

    기본 속성 종속 속성 설명
    $header 배경
    		 $header 전경 달력 헤더의 텍스트 색상
    $picker-호버-포라운드피커 호버 전경
    $picker-포커스-포면피커 포커스 전경
    $navigation-호버-컬러탐색용 호버 색상
    $navigation-초점-컬러내비게이션용 초점 색상
    $date-선택-배경선택된 날짜의 배경
    $date-선택-현재 배경선택된 현재 날짜 배경
    $date-선택-foreground선택된 날짜의 전경
    $date-선택-current-foreground현재 선택된 날짜의 전경
    $date-선택-current-border-color현재 날짜의 테두리 색상
    $date-선택-특별 테두리 색상특별 날짜별 테두리 색상
    $ym-선택-배경연도/월 배경 선택
    $ym-선택-호버-배경연도/월 선택한 날짜의 배경을 마우스로 표시하세요
    $ym-선택-현재 배경현재 선택된 연도/월 배경
    $ym-선택-현재 -호버-배경현재 선택한 연도/월의 배경을 마우스로 표시하세요
    $ym-선택-전경선택된 연도/월별 전경
    $ym-선택-호버-전경선택한 연도/월을 위해 전경을 마우스로 올리기
    $ym-선택-current-foreground현재 선택된 연도/월의 전경
    $ym-선택-current-hover-foreground(전경)현재 선택한 연도/월을 위해 전경을 올리기
    $content 배경
    		 $content 전경 캘린더 콘텐츠 영역 내 텍스트 및 아이콘 색상
    $weekend색주말 데이트용 색상
    $inactive색활성 범위 밖의 날짜 색상
    $weekday색평일 라벨용 색상
    $picker 배경피커 배경
    $date-호버-배경호버 날짜의 배경
    $date-호버-포경호버링 날짜의 전경
    $date-초점-배경집중 날짜의 배경
    $date-초점-전경초점 날짜를 위한 전경
    $date-현재 배경현재 날짜의 배경
    $date-현재 전경현재 날짜의 전경
    $date-현재 테두리-색상현재 날짜의 테두리 색상
    $ym-현재 배경연도/월 현재 배경
    $ym-현재 호버-배경현재 연도/월간 배경 호버
    $ym-현재 전경현재 연도/월간 전경
    $ym-현재 호버-포라운드현재 연도/월간 전경을 올려놓았다
    $date-선택-범위-배경선택된 산맥 배경
    $date-선택-범위-전경선택된 날짜 범위의 전경
    $date 선택-현재 범위-배경현재 선택된 날짜 범위의 배경
    $date-선택-현재 범위-호버-배경현재 날짜 범위를 위한 호버 배경
    $date-선택-현재 범위-초점-배경선택된 현재 날짜 범위에 대한 포커스 배경
    $date-선택-전류-범위-전경현재 선택된 날짜 범위의 전경
    $date-특수 전경특별 날짜를 위한 전경
    $date-특수 테두리 색상특별한 날짜를 위한 테두리 색상
    $date-특수-호버-테두리 색상특별한 날짜를 위한 호버 테두리 색상
    $date-특수 초점-전경특별한 날짜를 위한 전경에 초점
    $date-특수 범위-전경특별 날짜 범위의 전경
    $date-특수 범위-경계-색상특별 날짜 범위의 테두리 색상
    $date-특수 범위-호버-배경특별한 날짜 범위를 위한 호버 배경
    $date-선택-특별 테두리 색상특별 날짜별 테두리 색상
    $date-선택-특수-호버-테두리 색상특별 날짜를 위한 호버 테두리 색상
    $date-선택-특별 초점-테두리-컬러특별 날짜별 포커스 테두리 색상
    $date-장애인-전경장애인 날짜를 위한 전경
    $date-장애인-거리-전경장애인 사격장 전경
    $date-경계 반경
    		 $date-범위-경계-반경 데이트 범위의 경계 반경을 제어합니다.
    $date-전류-경계-반경현재 날짜의 국경 반경을 통제합니다.
    $date-특수 경계-반경특별 날짜의 국경 반경을 통제합니다.
    $date-경계 반경명시$date-range-border-radius 하지 않고 설정된 경우, 는 의$date-range-border-radius 값을 사용합니다.
    기본 속성 종속 속성 설명
    $header 배경
    		 $header 전경 달력 헤더의 텍스트 색상
    $picker-호버-포라운드피커 호버 전경
    $picker-포커스-포면피커 포커스 전경
    $date-현재 배경현재 날짜의 배경
    $date-현재 -호버-전경현재 날짜의 전경을 호버 표시
    $date-현재 -초점-전경현재 날짜의 포커스 포커스
    $date-선택-current-foreground현재 선택된 날짜의 전경
    $date-선택-current-hover-foreground(전경)현재 선택된 날짜를 위해 전경을 호버 표시합니다
    $date-selected-current-focus-foreground현재 선택한 날짜의 포커스 포커스
    $date-특수 테두리 색상특별한 날짜를 위한 테두리 색상
    $date-특수 호버-포라운드특별 날짜를 위한 전경 호버
    $content 배경
    		 $content 전경 캘린더 콘텐츠 영역 내 텍스트 및 아이콘 색상
    $weekend색주말 데이트용 색상
    $inactive색활성 범위 밖의 날짜 색상
    $weekday색평일 라벨용 색상
    $picker 배경피커 배경
    $date-호버-배경호버 날짜의 배경
    $date-호버-포경호버링 날짜의 전경
    $date-초점-배경집중 날짜의 배경
    $date-초점-전경초점 날짜를 위한 전경
    $date-선택-배경선택된 날짜의 배경
    $date-선택-호버-배경선택된 날짜에 대한 배경 호버
    $date-선택-초점-배경특정 날짜의 초점 배경
    $date-선택-foreground선택된 날짜의 전경
    $date-선택-호버-전경선택한 날짜를 위해 전경을 호버 표시
    $date-선택-초점-전경선택된 날짜에 대한 포커스 포먼스
    $date-선택-범위-배경선택된 날짜 범위에 대한 배경
    $date-선택-범위-전경선택된 날짜 범위의 전경
    $date-장애인-전경장애인 날짜를 위한 전경
    $date-장애인-거리-전경장애인 사격장 전경
    $date-경계 반경
    		 $date-범위-경계-반경 데이트 범위의 경계 반경을 제어합니다.
    $date-전류-경계-반경현재 날짜의 국경 반경을 통제합니다.
    $date-특수 경계-반경특별 날짜의 국경 반경을 통제합니다.
    $date-경계 반경명시$date-range-border-radius 하지 않고 설정된 경우, 는 의$date-range-border-radius 값을 사용합니다.
    기본 속성 종속 속성 설명
    $header 배경
    		 $header 전경 달력 헤더의 텍스트 색상
    $picker 배경피커 배경
    $picker-호버-포라운드피커 호버 전경
    $weekday색평일 라벨용 색상
    $picker-포커스-포면피커 포커스 전경
    $date-특수 테두리 색상특별한 날짜를 위한 테두리 색상
    $date-특수 초점-전경특별한 날짜를 위한 전경에 초점
    $content 배경
    		 $content 전경 캘린더 콘텐츠 영역 내 텍스트 및 아이콘 색상
    $weekend색주말 데이트용 색상
    $inactive색활성 범위 밖의 날짜 색상
    $weekday색평일 라벨용 색상
    $date-호버-배경호버 날짜의 배경
    $date-호버-포경호버링 날짜의 전경
    $date-초점-배경집중 날짜의 배경
    $date-초점-전경초점 날짜를 위한 전경
    $date-현재 배경현재 날짜의 배경
    $date-현재 전경현재 날짜의 전경
    $date-현재 테두리-색상현재 날짜의 테두리 색상
    $date-선택-배경선택된 날짜의 배경
    $date-선택-현재 배경현재 선정된 날짜의 배경
    $date-선택-foreground선택된 날짜의 전경
    $date-선택-current-foreground현재 선택된 날짜의 전경
    $date-선택-특별 테두리 색상특별 날짜별 테두리 색상
    $date-선택-특수-호버-테두리 색상특별 날짜를 위한 호버 테두리 색상
    $date-선택-특별 초점-테두리-컬러특별 날짜별 포커스 테두리 색상
    $date-선택-범위-배경선택된 날짜 범위에 대한 배경
    $date-선택-범위-전경선택된 날짜 범위의 전경
    $date-장애인-전경장애인 날짜를 위한 전경
    $date-장애인-거리-전경장애인 사격장 전경
    $date-경계 반경
    		 $date-범위-경계-반경 데이트 범위의 경계 반경을 제어합니다.
    $date-전류-경계-반경현재 날짜의 국경 반경을 통제합니다.
    $date-특수 경계-반경특별 날짜의 국경 반경을 통제합니다.
    $date-경계 반경명시$date-range-border-radius 하지 않고 설정된 경우, 는 의$date-range-border-radius 값을 사용합니다.
    기본 속성 종속 속성 설명
    $header 배경
    		 $header 전경 달력 헤더의 텍스트 색상
    $picker 배경피커 배경
    $picker-호버-포라운드피커 호버 전경
    $picker-포커스-포면피커 포커스 전경
    $navigation-호버-컬러내비게이션 호버 색상
    $navigation-초점-컬러내비게이션 초점 색상
    $date-현재 배경현재 날짜의 배경
    $date-현재 테두리-색상현재 날짜의 테두리 색상
    $date-현재 호버-배경현재 날짜가 떠오르는 배경
    $date-현재 호버-테두리 색상현재 날짜를 떠넘기는 테두리 색상
    $date-현재 초점-배경현재 초점을 맞춘 배경
    $date-현재 초점-경계-색상초점 현재 날짜의 테두리 색상
    $date-현재 전경현재 날짜의 전경
    $date-현재 -호버-전경현재 날짜를 떠올리는 전경
    $date-현재 -초점-전경초점 현재 날짜의 전경
    $date-선택-current-border-color현재 선택된 날짜의 테두리 색상
    $content 배경
    		 $content 전경 캘린더 콘텐츠 영역 내 텍스트 및 아이콘 색상
    $weekend색주말 데이트용 색상
    $inactive색활성 범위 밖의 날짜 색상
    $weekday색평일 라벨용 색상
    $date-호버-배경호버 날짜의 배경
    $date-호버-포경호버링 날짜의 전경
    $date-초점-배경집중 날짜의 배경
    $date-초점-전경초점 날짜를 위한 전경
    $date-선택-배경선택된 날짜의 배경
    $date-선택-현재 배경현재 선정된 날짜의 배경
    $date-선택-foreground선택된 날짜의 전경
    $date-선택-current-foreground현재 선택된 날짜의 전경
    $date-선택-current-border-color현재 선택된 날짜의 테두리 색상
    $date-선택-범위-배경선택된 날짜 범위에 대한 배경
    $date-선택-범위-전경선택된 날짜 범위의 전경
    $date 선택-현재 범위-배경현재 날짜의 배경
    $date-선택-현재 범위-호버-배경선택한 범위 내에서 현재 날짜의 배경을 마우스로 표시합니다
    $date-선택-전류-범위-전경현재 날짜의 전경은 선택된 범위 내에서
    $date-장애인-전경장애인 날짜를 위한 전경
    $date-장애인-거리-전경장애인 사격장 전경
    $date-경계 반경
    		 $date-범위-경계-반경 데이트 범위의 경계 반경을 제어합니다.
    $date-전류-경계-반경현재 날짜의 국경 반경을 통제합니다.
    $date-특수 경계-반경특별 날짜의 국경 반경을 통제합니다.
    $date-경계 반경명시$date-range-border-radius 하지 않고 설정된 경우, 는 의$date-range-border-radius 값을 사용합니다.

    달력 스타일링을 시작하려면, 모든 테마 기능과 컴포넌트 믹신이 있는 파일을 가져와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 하여 와 매개변수만$header-background​$content-background 지정하면 테마가 자동으로 적절한 상태 색상과 대비 전경을 계산합니다. 물론, 필요하다면 테마 파라미터를 커스텀 값으로 무시할 수도 있습니다.

    $custom-calendar-theme: calendar-theme(
  $header-background: #ecaa53,
  $content-background: #011627,
);

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

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

    Styling with Tailwind

    저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일calendar 링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

    전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

    • 라이트 테마에는 클래스를 사용light-* 하세요.
    • 어두운 테마에는 클래스를 사용dark-* 하세요.
    • 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-calendar​dark-calendar 예: .

    이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

    전체 부동산 목록은 캘린더 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:

    <igx-calendar
class="!light-calendar
![--header-background:#4F6A5A]
![--content-background:#A3C7B2]"
[weekStart]="1">
</igx-calendar>
    Note

    느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

    마지막에 당신의 달력은 이렇게 보여야 합니다:

    API References

    Additional Resources

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