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

    O IgxCalendar Component também depende doBrowserAnimationsModule e opcionalmente oHammerModule para interações por toque, então eles precisam ser adicionados ao AppModule também:

    // app.module.ts
...
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxCalendarModule } from 'igniteui-angular/calendar';
// 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/calendar';
// 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 {}

    Agora que você importou o módulo ou diretivas do Ignite UI for Angular Calendar, pode começar a usar oigx-calendar componente.

    Note

    EleIgxCalendarComponent utiliza a API da Web Internacional para localização e formatação de datas. Considere usar polifills apropriados se sua plataforma de alvo não os suportar.

    Using the Angular Calendar

    Angular Single Selection Calendar

    Instanciar oIgxCalendarComponent é tão simples quanto colocar seu elemento seletor no template. Isso mostrará o mês atual no modo de calendário de seleção única.

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

    Angular Calendar Multiselect

    Podemos facilmente mudar o modo padrão usando aselection propriedade:

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

    Note que o cabeçalho do calendário não é renderizado quando a seleção é um oumulti outrorange.

    Localization and Formatting

    Devido à sua própria natureza, localização e formatação são essenciais para qualquer calendário. NessesIgxCalendarComponent casos, são controlados e personalizados pelas seguintes propriedades -locale,formatOptions,formatViews,weekStart.

    Vamos tentar esses juntos com outras personalizações doIgxCalendarComponent API A primeira coisa que precisamos definir é oweekStart, que controla o dia de início da semana. Ele fica 0 por padrão, que corresponde ao domingo, então vamos definir um valor de 1 para segunda-feira. Na marcação abaixo, também estamos vinculando asformatOptions propriedades eformatViews para personalizar a formatação da exibição. Por fim, estamos vinculando alocale propriedade a um valor, baseado na escolha de localização do usuário:

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

    Todos os valores de propriedade devem ser definidos no arquivo 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 };
}

    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

    Esta seção demonstra o uso dadisabledDates funcionalidade. Para esse fim, diferentes datas ou intervalos individuais podem ser adicionados a um array e depois passados para odisabledDates descritor.

    ODateRangeType é usado para especificar um alcance que será desativado.

    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

    OspecialDates recurso utiliza quase os mesmos princípios de configuração que odisabledDates. A capacidade de selecionar e focarspecialDates é o que os diferencia dosdisabled outros.

    Vamos adicionar umspecialDates pouco ao nossoigxCalendar. Para isso, precisamos criar umDateRangeDescriptor item do tipoDateRangeType.Specific e passar uma matriz de datas como: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

    Agora você pode usarshowWeekNumbers input para mostrar os números da semana tanto para os componentes do Calendar quanto do DateSelecter.

    
<!-- 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- emitida ao selecionar data(s) no calendário.
    • viewDateChanged- emitido toda vez que o mês/ano apresentado é alterado - por exemplo, após navegar para onext mês de ou.previous​
    • activeViewChanged- emitido após a alteração da visualização ativa - por exemplo, depois que o usuário clicou namonth seção ouyear do cabeçalho.
    <!-- app.component.html -->
<igx-calendar #calendar
    (selected)="onSelection($event)"
    (viewDateChanged)="viewDateChanged($event)"
    (activeViewChanged)="activeViewChanged($event)">
</igx-calendar>

    Oselected evento é adequado para construir lógica de validação de entrada. Use o código abaixo para alertar o usuário se a seleção ultrapassar 5 dias e então resetar a seleção:

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

    Existem visões separadas fornecidas peloIgxCalendarModule que podem ser usadas de forma independente:

    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.

    Quando oigxCalendar componente estiver focado, 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

    Quando osprev botões do mêsnext ou (no subtítulo) estiverem focados, use:

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

    Quando omonths botão (no subcabeçalho) estiver focado, use:

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

    Quando oyear botão (no subcabeçalho) estiver focado, use:

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

    Quando umday dentro do mês atual é focado:

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

    Quando umamonth visão de dentro do mês estiver focada em uma visão de dentro do mês, 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.

    Quando umayear visão dentro da década for focada em questão, 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

    Calendário multi-view suporta os três tipos de seleção. Use amonthsViewNumber entrada para definir o número de meses exibidos, que será mostrado horizontalmente em um recipiente flexível. Não há limite para o conjunto máximo de valores. Ao usar um calendário com múltiplas visualizações, você pode querer esconder os dias que não pertencem ao mês atual. Você pode fazer isso com ahideOutsideDays propriedade. A navegação por teclado passa para os meses seguintes/anteriores quando esses meses estão à vista.

    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

    Você pode mudar a orientação do cabeçalho para colocar o cabeçalho do calendário na horizontal (acima da visualização do calendário) ou vertical (na lateral da visualização do calendário). Para isso, use a[headerOrientation] propriedade, definindo-a respectivamente comohorizontal ouvertical

    View Orientation Options

    Você pode definir a orientação da visualização para colocar os meses no calendário horizontalmente (lado a lado) ou verticalmente (um acima do outro). Para isso, use a[orientation] propriedade, definindo-a respectivamente comohorizontal ouvertical.

    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

    Quando você modifica as$header-background propriedades e,$content-background todas as propriedades de tema relacionadas são automaticamente ajustadas para garantir que seu componente de calendário seja estilizado de forma consistente. Veja as tabelas abaixo para uma visão detalhada de quais propriedades de tema são afetadas.

    Propriedade primária Propriedade dependente Descrição
    $header-contexto
    		 $header em primeiro plano Cor do texto para o cabeçalho do calendário
    $picker-pairar-primeiro planoPrimeiro plano com o picker pairando
    $picker-foco-primeiro planoFoco do picker em primeiro plano
    $navigation-hover-colorA cor do estacionário para navegação
    $navigation-foco de corCor de foco para navegação
    $date-selecionado-fundoContexto para datas selecionadas
    $date-selecionado-atual-fundoData atual selecionada de contexto
    $date-selecionado-primeiro planoDestaque para datas selecionadas
    $date-corrente-selecionado-primeiro planoPrimeiro plano para data atual selecionada
    $date-selecionada-cor-corrente-borda-Cor da borda para a data atual selecionada
    $date-selecionada-especial-cor-borda-Cor da borda para datas especiais selecionadas
    $ym-selecionado-fundoAno/mês de contexto selecionado
    $ym-selecionado-passa-mouse-fundoPasse o mouse para o fundo da data selecionada do ano/mês
    $ym-selecionado-atual-fundoContexto atual de ano/mês selecionado
    $ym-selecionado-atual-flutuar-fundoPasse o mouse para o ano/mês selecionado atual
    $ym-selecionado-primeiro planoDestaque para ano/mês selecionado
    $ym-selecionado-pairar-primeiro planoPasse em primeiro plano para ano/mês selecionado
    $ym-selecionado-corrente-primeiro planoDestaque para o ano/mês selecionado atual
    $ym-corrente-selecionada-pairar-primeiro planoPasse o mouse em primeiro plano para o ano/mês selecionado atual
    $content contexto
    		 $content-primeiro plano Cor do texto e dos ícones dentro da área de conteúdo do calendário
    $weekend corCor para datas de fim de semana
    $inactive corCor para datas fora da área ativa
    $weekday corCor para rótulos de dias úteis
    $picker contextoHistórico com Picker
    $date-hover-backgroundContexto para datas com hovering
    $date-pairar-primeiro planoPrimeiro plano para datas suspensas
    $date-foco-contextoContexto para datas focadas
    $date-foco em primeiro planoDestaque para datas focadas
    $date-atual-contextoContexto para a data atual
    $date-corrente-primeiro planoPrimeiro plano para a data atual
    $date-cor-borda-correnteCor da borda para a data atual
    $ym-atual-contextoAno/mês contexto atual
    $ym-corrente-flutuação-fundoPasse o mouse para o ano e mês atual
    $ym-corrente-primeiro planoDestaque para o ano/mês atual
    $ym-corrente-pairo-primeiro planoPasse o mouse em primeiro plano para o ano/mês atual
    $date-seleção-alcance-fundoHistórico selecionado da faixa
    $date-selecionado-alcance-primeiro planoPrimeiro plano para intervalos de datas selecionados
    $date-atual-selecionado-alcance-fundoContexto para intervalos de datas atuais selecionados
    $date-seleção-alcance-corrente-pairar-fundoPasse o mouse no fundo para intervalos de datas atuais selecionados
    $date-atual-alcance-foco-fundo de foco selecionadoContexto de foco para intervalos de datas atuais selecionados
    $date-seleção-atual-intervalo-primeiro planoPrimeiro plano para intervalos de datas atuais selecionados
    $date-especial-primeiro planoPrimeiro plano para datas especiais
    $date-cor-borda-especialCor da borda para datas especiais
    $date-especial-borda-flutuação-corCor da borda do hover para datas especiais
    $date-foco especial-primeiro planoDestaque para datas especiais
    $date-especial-alcance-primeiro planoPrimeiro plano para intervalos de datas especiais
    $date-faixa especial-cor da bordaCor da borda para intervalos de datas especiais
    $date-especial-alcance-hover-fundoPasse o mouse no fundo para intervalos de datas especiais
    $date-selecionada-especial-cor-borda-Cor da borda para datas especiais selecionadas
    $date-selecionada-especial-flutuação-cor-borda-Cor da borda de hover para datas especiais selecionadas
    $date-foca-especial-selecionada-cor-borda-Foco na cor da borda para datas especiais selecionadas
    $date-desabilitado-primeiro planoPrimeiro plano para datas com deficiência
    $date-alcance desativado-primeiro planoPrimeiro plano para campos de tiro para pessoas com deficiência
    $date-raio de fronteira
    		 $date-raio-fronteira-faixa Controla o raio da fronteira para intervalos de datas.
    $date-raio-corrente-fronteiraControla o raio da fronteira para a data atual.
    $date-raio-especial-fronteira-Controla o raio da fronteira para datas especiais.
    $date-raio de fronteiraSe não for especificado e$date-range-border-radius for definido, usa o valor de$date-range-border-radius.
    Propriedade primária Propriedade dependente Descrição
    $header-contexto
    		 $header em primeiro plano Cor do texto para o cabeçalho do calendário
    $picker-pairar-primeiro planoPrimeiro plano com o picker pairando
    $picker-foco-primeiro planoFoco do picker em primeiro plano
    $date-atual-contextoContexto para a data atual
    $date-corrente-pairo-primeiro planoPasse em primeiro plano para a data atual
    $date-corrente-foco-primeiro planoFoco em primeiro plano para a data atual
    $date-corrente-selecionado-primeiro planoPrimeiro plano para a data atualmente selecionada
    $date-corrente-selecionada-pairar-primeiro planoPasse o mouse em primeiro plano para a data atualmente selecionada
    $date-atual-selecionada-foco-primeiro planoFoco em primeiro plano para a data atualmente selecionada
    $date-cor-borda-especialCor da borda para datas especiais
    $date-especial pairar-primeiro planoPaire em primeiro plano para datas especiais
    $content contexto
    		 $content-primeiro plano Cor do texto e dos ícones dentro da área de conteúdo do calendário
    $weekend corCor para datas de fim de semana
    $inactive corCor para datas fora da área ativa
    $weekday corCor para rótulos de dias úteis
    $picker contextoHistórico com Picker
    $date-hover-backgroundContexto para datas com hovering
    $date-pairar-primeiro planoPrimeiro plano para datas suspensas
    $date-foco-contextoContexto para datas focadas
    $date-foco em primeiro planoDestaque para datas focadas
    $date-selecionado-fundoContexto para datas selecionadas
    $date-selecionada-flutuar-fundo-Passe o mouse para as datas selecionadas
    $date-foco-selecionado-fundo-fundoContexto de foco para datas selecionadas
    $date-selecionado-primeiro planoDestaque para datas selecionadas
    $date-selecionado-pairar-primeiro planoPasse em primeiro plano para datas selecionadas
    $date-foco-selecionado-primeiro planoDestaque em primeiro plano para datas selecionadas
    $date-seleção-alcance-fundoContexto para intervalos de datas selecionados
    $date-selecionado-alcance-primeiro planoPrimeiro plano para intervalos de datas selecionados
    $date-desabilitado-primeiro planoPrimeiro plano para datas com deficiência
    $date-alcance desativado-primeiro planoPrimeiro plano para campos de tiro para pessoas com deficiência
    $date-raio de fronteira
    		 $date-raio-fronteira-faixa Controla o raio da fronteira para intervalos de datas.
    $date-raio-corrente-fronteiraControla o raio da fronteira para a data atual.
    $date-raio-especial-fronteira-Controla o raio da fronteira para datas especiais.
    $date-raio de fronteiraSe não for especificado e$date-range-border-radius for definido, usa o valor de$date-range-border-radius.
    Propriedade primária Propriedade dependente Descrição
    $header-contexto
    		 $header em primeiro plano Cor do texto para o cabeçalho do calendário
    $picker contextoHistórico com Picker
    $picker-pairar-primeiro planoPrimeiro plano com o picker pairando
    $weekday corCor para rótulos de dias úteis
    $picker-foco-primeiro planoFoco do picker em primeiro plano
    $date-cor-borda-especialCor da borda para datas especiais
    $date-foco especial-primeiro planoDestaque para datas especiais
    $content contexto
    		 $content-primeiro plano Cor do texto e dos ícones dentro da área de conteúdo do calendário
    $weekend corCor para datas de fim de semana
    $inactive corCor para datas fora da área ativa
    $weekday corCor para rótulos de dias úteis
    $date-hover-backgroundContexto para datas com hovering
    $date-pairar-primeiro planoPrimeiro plano para datas suspensas
    $date-foco-contextoContexto para datas focadas
    $date-foco em primeiro planoDestaque para datas focadas
    $date-atual-contextoContexto para a data atual
    $date-corrente-primeiro planoPrimeiro plano para a data atual
    $date-cor-borda-correnteCor da borda para a data atual
    $date-selecionado-fundoContexto para datas selecionadas
    $date-selecionado-atual-fundoContexto para a data atualmente selecionada
    $date-selecionado-primeiro planoDestaque para datas selecionadas
    $date-corrente-selecionado-primeiro planoPrimeiro plano para a data atualmente selecionada
    $date-selecionada-especial-cor-borda-Cor da borda para datas especiais selecionadas
    $date-selecionada-especial-flutuação-cor-borda-Cor da borda de hover para datas especiais selecionadas
    $date-foca-especial-selecionada-cor-borda-Foco na cor da borda para datas especiais selecionadas
    $date-seleção-alcance-fundoContexto para intervalos de datas selecionados
    $date-selecionado-alcance-primeiro planoPrimeiro plano para intervalos de datas selecionados
    $date-desabilitado-primeiro planoPrimeiro plano para datas com deficiência
    $date-alcance desativado-primeiro planoPrimeiro plano para campos de tiro para pessoas com deficiência
    $date-raio de fronteira
    		 $date-raio-fronteira-faixa Controla o raio da fronteira para intervalos de datas.
    $date-raio-corrente-fronteiraControla o raio da fronteira para a data atual.
    $date-raio-especial-fronteira-Controla o raio da fronteira para datas especiais.
    $date-raio de fronteiraSe não for especificado e$date-range-border-radius for definido, usa o valor de$date-range-border-radius.
    Propriedade primária Propriedade dependente Descrição
    $header-contexto
    		 $header em primeiro plano Cor do texto para o cabeçalho do calendário
    $picker contextoHistórico com Picker
    $picker-pairar-primeiro planoPrimeiro plano com o picker pairando
    $picker-foco-primeiro planoFoco do picker em primeiro plano
    $navigation-hover-colorCor do estacionário de navegação
    $navigation-foco de corCor do foco de navegação
    $date-atual-contextoContexto para a data atual
    $date-cor-borda-correnteCor da borda para a data atual
    $date-corrente-fundo-flutuanteContexto para a data atual com o mouse
    $date-corrente-borda-cor do hover-Cor da borda para a data atual com o mouse
    $date-foco-atual-fundoContexto para a data atual focada
    $date-foco-corrente-borda-corCor da borda para data atual focada
    $date-corrente-primeiro planoPrimeiro plano para a data atual
    $date-corrente-pairo-primeiro planoPrimeiro plano para a data atual pairada
    $date-corrente-foco-primeiro planoPrimeiro plano para a data atual focada
    $date-selecionada-cor-corrente-borda-Cor da borda para a data atualmente selecionada
    $content contexto
    		 $content-primeiro plano Cor do texto e dos ícones dentro da área de conteúdo do calendário
    $weekend corCor para datas de fim de semana
    $inactive corCor para datas fora da área ativa
    $weekday corCor para rótulos de dias úteis
    $date-hover-backgroundContexto para datas com hovering
    $date-pairar-primeiro planoPrimeiro plano para datas suspensas
    $date-foco-contextoContexto para datas focadas
    $date-foco em primeiro planoDestaque para datas focadas
    $date-selecionado-fundoContexto para datas selecionadas
    $date-selecionado-atual-fundoContexto para a data atualmente selecionada
    $date-selecionado-primeiro planoDestaque para datas selecionadas
    $date-corrente-selecionado-primeiro planoPrimeiro plano para a data atualmente selecionada
    $date-selecionada-cor-corrente-borda-Cor da borda para a data atualmente selecionada
    $date-seleção-alcance-fundoContexto para intervalos de datas selecionados
    $date-selecionado-alcance-primeiro planoPrimeiro plano para intervalos de datas selecionados
    $date-atual-selecionado-alcance-fundoContexto para a data atual em um intervalo selecionado
    $date-seleção-alcance-corrente-pairar-fundoPasse o mouse para o fundo da data atual em um intervalo selecionado
    $date-seleção-atual-intervalo-primeiro planoPrimeiro plano para a data atual em um intervalo selecionado
    $date-desabilitado-primeiro planoPrimeiro plano para datas com deficiência
    $date-alcance desativado-primeiro planoPrimeiro plano para campos de tiro para pessoas com deficiência
    $date-raio de fronteira
    		 $date-raio-fronteira-faixa Controla o raio da fronteira para intervalos de datas.
    $date-raio-corrente-fronteiraControla o raio da fronteira para a data atual.
    $date-raio-especial-fronteira-Controla o raio da fronteira para datas especiais.
    $date-raio de fronteiraSe não for especificado e$date-range-border-radius for definido, usa o valor de$date-range-border-radius.

    Para começar a estilizar o calendário, precisamos importar oindex arquivo, onde todas as funções de tema e os componentes misturam estão ativos:

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

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

    Seguindo a abordagem mais simples, criamos um novo tema que estende ocalendar-theme e, especificando apenas os$header-background parâmetros e,$content-background o tema calculará automaticamente as cores de estado apropriadas e os primeiros planos de contraste. Claro, você ainda pode sobrescrever qualquer um dos parâmetros do tema com valores personalizados, se necessário.

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

    No final, seu calendário deve ficar assim:

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.