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

    The IgxCalendarComponent also depends on the BrowserAnimationsModule and optionally the HammerModule for touch interactions, so they need to be added to the AppModule as well:

    // 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 {}

    Now that you have the Ignite UI for Angular Calendar module or directives imported, you can start using the igx-calendar component.

    Note

    The IgxCalendarComponent uses the Intl Web API for localization and formatting of dates. Consider using appropriate polyfills if your target platform does not support them.

    Using the Angular Calendar

    Angular Single Selection Calendar

    Instantiating the IgxCalendarComponent is as easy as placing its selector element in the template. This will display the current month in the single selection calendar mode.

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

    Angular Calendar Multiselect

    We can easily change the default mode using the selection property:

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

    Notice that the calendar header is not rendered when the selection is either multi or range.

    Localization and Formatting

    Due to their very nature, localization and formatting are essential to any calendar. In the IgxCalendarComponent those are controlled and customized through the following properties - locale, formatOptions, formatViews, weekStart.

    Let's go ahead and try those along with other customizations from the IgxCalendarComponent API. First thing we need to set is the weekStart, which controls the starting day of the week. It defaults to 0, which corresponds to Sunday, so we will set a value of 1 for Monday. In the markup below we are also binding the formatOptions and formatViews properties to customize the display formatting. Finally, we are binding the locale property to a value, based on the user's location choice:

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

    All property values should be set in the AppComponent file:

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

    This section demonstrates the usage of disabledDates functionality. For this purpose, different single dates or ranges can be added to an array and then passed to the disabledDates descriptor.

    The DateRangeType is used to specify a range that is going to be disabled.

    이번 달 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

    The specialDates feature is using almost the same configuration principles as the disabledDates. The ability to select and focus specialDates is what differs them from the disabled ones.

    Let's add some specialDates to our igxCalendar. In order to do this, we have to create a DateRangeDescriptor item of type DateRangeType.Specific and pass an array of dates as a 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

    You can now use showWeekNumbers input to show the week numbers for both Calendar and DatePicker components.

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

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

    Calendar Events

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

    • selected - emitted when selecting date(s) in the calendar.
    • viewDateChanged - emitted every time when the presented month/year is changed - for example after navigating to the next or previous month.
    • activeViewChanged - emitted after the active view is changed - for example after the user has clicked on the month or year section in the header.
    <!-- app.component.html -->
<igx-calendar #calendar
    (selected)="onSelection($event)"
    (viewDateChanged)="viewDateChanged($event)"
    (activeViewChanged)="activeViewChanged($event)">
</igx-calendar>

    The selected event is suitable to build input validation logic. Use the code from below to alert the user if selection exceeds 5 days, and then reset the selection:

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

    There are separate views provided by the IgxCalendarModule that can be used independently:

    키보드 탐색

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

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

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

    Note

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

    When the igxCalendar component is focused, use:

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

    When the prev or the next month buttons (in the subheader) are focused, use:

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

    When the months button (in the subheader) is focused, use:

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

    When the year button (in the subheader) is focused, use:

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

    When a day inside the current month is focused:

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

    When a month inside the months view is focused, use:

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

    When an year inside the decade view is focused, use:

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

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

    Multi View Calendar

    Multi-view calendar supports all three types of selection. Use the monthsViewNumber input to set the number of displayed months, which will be shown horizontally in a flex container. There is no limit on the max value set. While using a multi view calendar, you may want to hide the days that do not belong to the current month. You are able to do it with the hideOutsideDays property. Keyboard navigation moves to next/previous months when those are in view.

    Calendar Orientation

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

    Header Orientation Options

    You can change the header orientation to place the header of the calendar to be either horizontal(above the calendar view) or vertical(on the side of the calendar view). To do that, use the [headerOrientation] property, setting it respectively to horizontal or vertical

    View Orientation Options

    You can set the view orientation to place the months in the calendar either horizontally(side by side) or vertically(above one another). To do that, use the [orientation] property, setting it respectively to horizontal or 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

    When you modify the $header-background and $content-background properties, all related theme properties are automatically adjusted to ensure your calendar component is styled consistently. See the tables below for a detailed overview of which theme properties are affected.

    기본 속성 종속 속성 설명
    $header 배경
    		 $header 전경 Text color for the calendar header
    $picker-hover-foregroundPicker hover foreground
    $picker-focus-foregroundPicker focus foreground
    $navigation-hover-colorHover color for navigation
    $navigation-focus-colorFocus color for navigation
    $date-selected-backgroundBackground for selected dates
    $date-selected-current-backgroundSelected current date background
    $date-selected-foregroundForeground for selected dates
    $date-selected-current-foregroundForeground for selected current date
    $date-selected-current-border-colorBorder color for selected current date
    $date-selected-special-border-colorBorder color for selected special dates
    $ym-selected-backgroundYear/month selected background
    $ym-selected-hover-backgroundHover background for year/month selected date
    $ym-selected-current-backgroundCurrent selected year/month background
    $ym-selected-current-hover-backgroundHover background for current selected year/month
    $ym-selected-foregroundForeground for selected year/month
    $ym-selected-hover-foregroundHover foreground for selected year/month
    $ym-selected-current-foregroundForeground for current selected year/month
    $ym-selected-current-hover-foregroundHover foreground for current selected year/month
    $content-background
    		 $content-foreground Text and icon color inside calendar content area
    $weekend-colorColor for weekend dates
    $inactive-colorColor for dates outside active range
    $weekday-colorColor for weekday labels
    $picker-backgroundPicker background
    $date-hover-backgroundBackground for hovered dates
    $date-hover-foregroundForeground for hovered dates
    $date-focus-backgroundBackground for focused dates
    $date-focus-foregroundForeground for focused dates
    $date-current-backgroundBackground for the current date
    $date-current-foregroundForeground for the current date
    $date-current-border-colorBorder color for the current date
    $ym-current-backgroundYear/month current background
    $ym-current-hover-backgroundHover background for current year/month
    $ym-current-foregroundForeground for current year/month
    $ym-current-hover-foregroundHover foreground for current year/month
    $date-selected-range-backgroundSelected range background
    $date-selected-range-foregroundForeground for selected date ranges
    $date-selected-current-range-backgroundBackground for selected current date ranges
    $date-selected-current-range-hover-backgroundHover background for selected current date ranges
    $date-selected-current-range-focus-backgroundFocus background for selected current date ranges
    $date-selected-current-range-foregroundForeground for selected current date ranges
    $date-special-foregroundForeground for special dates
    $date-special-border-colorBorder color for special dates
    $date-special-hover-border-colorHover border color for special dates
    $date-special-focus-foregroundFocus foreground for special dates
    $date-special-range-foregroundForeground for special date ranges
    $date-special-range-border-colorBorder color for special date ranges
    $date-special-range-hover-backgroundHover background for special date ranges
    $date-selected-special-border-colorBorder color for selected special dates
    $date-selected-special-hover-border-colorHover border color for selected special dates
    $date-selected-special-focus-border-colorFocus border color for selected special dates
    $date-disabled-foregroundForeground for disabled dates
    $date-disabled-range-foregroundForeground for disabled ranges
    $date-border-radius
    		 $date-range-border-radius Controls the border radius for date ranges.
    $date-current-border-radiusControls the border radius for the current date.
    $date-special-border-radiusControls the border radius for special dates.
    $date-border-radiusIf not specified and $date-range-border-radius is set, uses the value of $date-range-border-radius.
    기본 속성 종속 속성 설명
    $header 배경
    		 $header 전경 Text color for the calendar header
    $picker-hover-foregroundPicker hover foreground
    $picker-focus-foregroundPicker focus foreground
    $date-current-backgroundBackground for the current date
    $date-current-hover-foregroundHover foreground for the current date
    $date-current-focus-foregroundFocus foreground for the current date
    $date-selected-current-foregroundForeground for the currently selected date
    $date-selected-current-hover-foregroundHover foreground for the currently selected date
    $date-selected-current-focus-foregroundFocus foreground for the currently selected date
    $date-special-border-colorBorder color for special dates
    $date-special-hover-foregroundHover foreground for special dates
    $content-background
    		 $content-foreground Text and icon color inside calendar content area
    $weekend-colorColor for weekend dates
    $inactive-colorColor for dates outside active range
    $weekday-colorColor for weekday labels
    $picker-backgroundPicker background
    $date-hover-backgroundBackground for hovered dates
    $date-hover-foregroundForeground for hovered dates
    $date-focus-backgroundBackground for focused dates
    $date-focus-foregroundForeground for focused dates
    $date-selected-backgroundBackground for selected dates
    $date-selected-hover-backgroundHover background for selected dates
    $date-selected-focus-backgroundFocus background for selected dates
    $date-selected-foregroundForeground for selected dates
    $date-selected-hover-foregroundHover foreground for selected dates
    $date-selected-focus-foregroundFocus foreground for selected dates
    $date-selected-range-backgroundBackground for selected date ranges
    $date-selected-range-foregroundForeground for selected date ranges
    $date-disabled-foregroundForeground for disabled dates
    $date-disabled-range-foregroundForeground for disabled ranges
    $date-border-radius
    		 $date-range-border-radius Controls the border radius for date ranges.
    $date-current-border-radiusControls the border radius for the current date.
    $date-special-border-radiusControls the border radius for special dates.
    $date-border-radiusIf not specified and $date-range-border-radius is set, uses the value of $date-range-border-radius.
    기본 속성 종속 속성 설명
    $header 배경
    		 $header 전경 Text color for the calendar header
    $picker-backgroundPicker background
    $picker-hover-foregroundPicker hover foreground
    $weekday-colorColor for weekday labels
    $picker-focus-foregroundPicker focus foreground
    $date-special-border-colorBorder color for special dates
    $date-special-focus-foregroundFocus foreground for special dates
    $content-background
    		 $content-foreground Text and icon color inside calendar content area
    $weekend-colorColor for weekend dates
    $inactive-colorColor for dates outside active range
    $weekday-colorColor for weekday labels
    $date-hover-backgroundBackground for hovered dates
    $date-hover-foregroundForeground for hovered dates
    $date-focus-backgroundBackground for focused dates
    $date-focus-foregroundForeground for focused dates
    $date-current-backgroundBackground for the current date
    $date-current-foregroundForeground for the current date
    $date-current-border-colorBorder color for the current date
    $date-selected-backgroundBackground for selected dates
    $date-selected-current-backgroundBackground for the currently selected date
    $date-selected-foregroundForeground for selected dates
    $date-selected-current-foregroundForeground for the currently selected date
    $date-selected-special-border-colorBorder color for selected special dates
    $date-selected-special-hover-border-colorHover border color for selected special dates
    $date-selected-special-focus-border-colorFocus border color for selected special dates
    $date-selected-range-backgroundBackground for selected date ranges
    $date-selected-range-foregroundForeground for selected date ranges
    $date-disabled-foregroundForeground for disabled dates
    $date-disabled-range-foregroundForeground for disabled ranges
    $date-border-radius
    		 $date-range-border-radius Controls the border radius for date ranges.
    $date-current-border-radiusControls the border radius for the current date.
    $date-special-border-radiusControls the border radius for special dates.
    $date-border-radiusIf not specified and $date-range-border-radius is set, uses the value of $date-range-border-radius.
    기본 속성 종속 속성 설명
    $header 배경
    		 $header 전경 Text color for the calendar header
    $picker-backgroundPicker background
    $picker-hover-foregroundPicker hover foreground
    $picker-focus-foregroundPicker focus foreground
    $navigation-hover-colorNavigation hover color
    $navigation-focus-colorNavigation focus color
    $date-current-backgroundBackground for the current date
    $date-current-border-colorBorder color for the current date
    $date-current-hover-backgroundBackground for hovered current date
    $date-current-hover-border-colorBorder color for hovered current date
    $date-current-focus-backgroundBackground for focused current date
    $date-current-focus-border-colorBorder color for focused current date
    $date-current-foregroundForeground for the current date
    $date-current-hover-foregroundForeground for hovered current date
    $date-current-focus-foregroundForeground for focused current date
    $date-selected-current-border-colorBorder color for the currently selected date
    $content-background
    		 $content-foreground Text and icon color inside calendar content area
    $weekend-colorColor for weekend dates
    $inactive-colorColor for dates outside active range
    $weekday-colorColor for weekday labels
    $date-hover-backgroundBackground for hovered dates
    $date-hover-foregroundForeground for hovered dates
    $date-focus-backgroundBackground for focused dates
    $date-focus-foregroundForeground for focused dates
    $date-selected-backgroundBackground for selected dates
    $date-selected-current-backgroundBackground for the currently selected date
    $date-selected-foregroundForeground for selected dates
    $date-selected-current-foregroundForeground for the currently selected date
    $date-selected-current-border-colorBorder color for the currently selected date
    $date-selected-range-backgroundBackground for selected date ranges
    $date-selected-range-foregroundForeground for selected date ranges
    $date-selected-current-range-backgroundBackground for the current date in a selected range
    $date-selected-current-range-hover-backgroundHover background for the current date in a selected range
    $date-selected-current-range-foregroundForeground for the current date in a selected range
    $date-disabled-foregroundForeground for disabled dates
    $date-disabled-range-foregroundForeground for disabled ranges
    $date-border-radius
    		 $date-range-border-radius Controls the border radius for date ranges.
    $date-current-border-radiusControls the border radius for the current date.
    $date-special-border-radiusControls the border radius for special dates.
    $date-border-radiusIf not specified and $date-range-border-radius is set, uses the value of $date-range-border-radius.

    To get started with styling the calendar, we need to import the index file, where all the theme functions and component mixins live:

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

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

    Following the simplest approach, we create a new theme that extends the calendar-theme and by specifying just the $header-background and $content-background parameters, the theme will automatically compute appropriate state colors and contrast foregrounds. Of course, you're still free to override any of the theme parameters with custom values if needed.

    $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는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

    At the end your calendar should look like this:

    API References

    Additional Resources

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