Visão geral do componente Angular Calendar

    Angular Calendar é um componente de UI usado para exibir datas e dias em um aplicativo. Suportando diferentes recursos, ele permite que os usuários gerenciem facilmente funcionalidades de calendário, arrastem e criem eventos em um calendário, naveguem até uma data preferida nele e mostrem eventos em uma visualização mensal, semanal ou diária do calendário Angular com um único clique.

    O componente Ignite UI for Angular Calendar, desenvolvido como um componente nativo Angular, fornece maneiras fáceis e intuitivas de exibir informações de data, habilitar datas ou aplicar o modo de desabilitação de datas do calendário Angular. Os usuários podem escolher entre três modos de seleção diferentes - seleção única, seleção múltipla ou seleção de intervalo.

    Angular Calendar Example

    Criamos o seguinte exemplo de Angular Calendar usando o pacote Ignite UI for Angular Calendar. Ele mostra rapidamente como um calendário básico se parece e se comporta, como os usuários podem escolher e destacar uma única data e como ir e voltar para uma data específica.

    Getting Started with Ignite UI for Angular Calendar

    Para começar a usar o componente Ignite UI for Angular Calendar, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar issoIgxCalendarModule no seu arquivo 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 {}

    Alternativamente,16.0.0 você pode importarIgxCalendarComponent como uma dependência independente ou usar oIGX_CALENDAR_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

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

    Seguindo a mesma abordagem, podemos alternar para o modo de seleção de intervalo:

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

    Se tudo correu bem, agora devemos ter um calendário com exibição de datas personalizadas, que também altera a representação de localidade, com base na localização do usuário. Vamos dar uma olhada:

    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.

    Vamos criar um exemplo que desabilita as datas entre os dias 3 e 8 do mês atual:

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

    Essas configurações devem ter o seguinte resultado:

    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>

    A demonstração a seguir ilustra um calendário com uma opção de solicitação de férias:

    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>

    A demonstração a seguir ilustra um calendário com números de semana habilitados:

    Calendar Events

    Vamos explorar os eventos emitidos pelo calendário:

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

    Use a demonstração abaixo para brincar (alterar seleção, navegar por meses e anos) e ver os eventos registrados em tempo real:

    Angular Calendar Views

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

    Navegação pelo teclado

    Se você navegar pela página usando a tecla Tab, lembre-se de que, com base nas recomendações de acessibilidade do W3, o igxCalendarComponent agora apresenta as seguintes paradas de tabulação:

    • Botão do mês anterior
    • Botão de seleção de mês
    • Botão de seleção de ano
    • Botão do próximo mês
    • Data selecionada, Data atual, Primeira data focalizável (não desabilitada) na visualização de dias

    Em um Angular Calendar que contém mais de uma data selecionada, apenas a primeira data será introduzida como uma parada de tabulação. Por exemplo, quando uma seleção múltipla Angular Calendar está habilitada e você selecionou as datas: 13/10/2020, 17/10/2020 e 21/10/2020, apenas 13/10/2020 estará acessível durante a navegação por tabulação; em um Angular Calendar Range Picker, apenas a primeira data do intervalo selecionado fará parte da sequência de tabulação da página.

    Note

    Mudança comportamental, a partir da v10.2.0- A navegação por tecla Tab na visualização de dias não está mais disponível. Para navegar entre as datas na visualização de data, você deve usar as teclas de seta.

    When the igxCalendar component is focused, use:

    • Tecla PageUp para mover para o mês anterior,
    • Tecla PageDown para mover para o próximo mês,
    • Teclas Shift + PageUp para ir para o ano anterior,
    • Teclas Shift + PageDown para avançar para o próximo ano,
    • Tecla Home para focar o primeiro dia do mês atual ou o primeiro mês em exibição
    • Tecla End para focar o último dia do mês atual ou o último mês em exibição

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

    • Pressione a tecla Espaço ou Enter para rolar e visualizar o mês seguinte ou anterior.

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

    • Tecla de espaço ou Enter para abrir a visualização de meses.

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

    • Tecla de espaço ou Enter para abrir a visualização de décadas.

    When a day inside the current month is focused:

    • Use as teclas de seta para navegar pelos dias. Nota: As datas desabilitadas serão puladas.
    • O foco será mantido no mês atual que está na visualização, enquanto a navegação vai de / para o último dia / primeiro dia do mês.
    • A navegação na base de dados seria contínua, o que significa que ela percorrerá todos os meses enquanto navega com as setas.
    • Use a tecla Enter para selecionar o dia em foco no momento.

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

    • Teclas de seta para navegar pelos meses.
    • Tecla Home para focar o primeiro mês dentro da visualização de meses.
    • Tecla End para focar o último mês dentro da visualização de meses.
    • Pressione a tecla Enter para selecionar o mês em foco no momento e fechar a visualização.

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

    • Teclas de seta para cima e seta para baixo para navegar pelos anos,
    • Pressione a tecla Enter para selecionar o ano em foco no momento e fechar a visualização.
    Note

    Após a versão 8.2.0, a navegação pelo teclado não focará os dias fora do mês atual, mas mudará o mês em exibição.

    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

    As configurações de orientação permitem que os usuários escolham como o cabeçalho e a visualização do calendário são exibidos.

    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

    Você precisa de pelo menos dois meses de calendário para ver a propriedade funcionando.

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

    Estilização

    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.

    Propriedade primária Propriedade dependente Descrição
    $header-contexto
    		 $header em primeiro plano 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.
    Propriedade primária Propriedade dependente Descrição
    $header-contexto
    		 $header em primeiro plano 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.
    Propriedade primária Propriedade dependente Descrição
    $header-contexto
    		 $header em primeiro plano 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.
    Propriedade primária Propriedade dependente Descrição
    $header-contexto
    		 $header em primeiro plano 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,
);

    O último passo é passar o tema do calendário personalizado:

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

    Styling with Tailwind

    Você pode usarcalendar nossas classes utilitárias personalizadas de Tailwind. Certifique-se de configurar o Tailwind primeiro.

    Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

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

    O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

    • Uselight-* as aulas para o tema da luz.
    • Usedark-* classes para o tema sombrio.
    • Adicione o nome do componente após o prefixo, por exemplo,light-calendar,dark-calendar.

    Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

    Você pode encontrar a lista completa de propriedades no tema do calendário. A sintaxe é a seguinte:

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

    O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

    At the end your calendar should look like this:

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.