Visão geral do calendário Web Components

O componente Calendário Ignite UI for Web Components é leve e fácil de configurar. É usado para mostrar datas e dias da semana. É também a melhor maneira de fornecer visualizações mensais ou anuais aos usuários finais. O controle Calendário Ignite UI for Web Components permite restringir os intervalos de datas mínimo e máximo pelos quais as pessoas podem navegar.

O Ignite UI para Ignite UI for Web Components Calendário fornece uma maneira fácil e intuitiva de exibir informações de data. Ele inclui diferentes recursos, como modos de seleção de data única ou múltipla, destacar e selecionar intervalo de datas, navegação pelo teclado, ativação de números de semana, opções de tamanho e espaçamento e muito mais.

Web Components Calendar Example

O exemplo de componente Web Components IgcCalendarComponent a seguir mostra um calendário básico com um modo de seleção de dia único. Veja como funciona ou inspecione o código por trás.

How To Create a Calendar in Web Components with Ignite UI

Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

npm install igniteui-webcomponents

import { defineComponents, IgcCalendarComponent } from 'igniteui-webcomponents';

defineComponents(IgcCalendarComponent);

Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

A maneira mais simples de começar a usar o Ignite UI for Web Components IgcCalendarComponent é a seguinte:

<igc-calendar></igc-calendar>

Selection Modes

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. Por padrão, o Ignite UI for Web Components IgcCalendarComponent está usando o modo de seleção única, mas você pode alterá-lo definindo a selection propriedade conforme mostrado neste exemplo.

<igc-calendar selection="multiple"></igc-calendar>

Range Selection

Seguindo a mesma abordagem, podemos alternar selection para o modo de intervalo:

<!-- Range selection mode -->
<igc-calendar selection="range"></igc-calendar>

Active View and Date

O componente Calendário Ignite UI for Web Components permite alternar entre três visualizações diferentes: dias, meses e anos. A activeView propriedade do componente reflete a exibição atual. Por padrão, o Calendário exibe a data atual quando carregado inicialmente. Você pode modificar isso definindo a activeDate propriedade. A activeDate propriedade também reflete as alterações da data visível no momento feitas pelo usuário final.

Header Options

Por padrão, o componente Calendário do Ignite UI for Web Components renderiza uma área de cabeçalho que contém informações sobre as datas selecionadas. Você pode ocultar o cabeçalho definindo a HasHeader propriedade como false. Você também pode configurar vertical a horizontal orientação do cabeçalho usando a headerOrientation propriedade.

[!Note] Please note that the Ignite UI for Web Components Calendar header is not rendered when the selection is set to multiple.

[!Note] Please note that the Ignite UI for Web Components Calendar DOM properties use camelCase naming while their corresponding HTML attributes are using kebab-case. For example the headerOrientation property corresponds to the header-orientation attribute.

O componente Calendário Ignite UI for Web Components expõe um title slot que permite personalizar o título do cabeçalho.

<igc-calendar selection="range" header-orientation="vertical">
    <span slot="title">Trip dates</span>
</igc-calendar>

O exemplo a seguir demonstra a configuração acima:

Localization and Formatting

Devido à sua própria natureza, a localização e a formatação são essenciais para qualquer calendário. No Ignite UI for Web Components IgcCalendarComponent eles são controlados e personalizados através das seguintes propriedades -locale, formatOptions, weekStart.

Vamos experimentá-los junto com outras personalizações. A primeira coisa que precisamos definir é o weekStart, que controla o dia de início da semana. O padrão é Sunday, então vamos configurá-lo como Monday. Também personalizaremos a formatOptions propriedade que especifica as opções usadas para formatar os meses e os dias da semana nas exibições de calendário. Por fim, definiremos a locale propriedade como um valor, com base na escolha de localização do usuário:

<igc-radio-group alignment="horizontal">
    <igc-radio name="locale" value="en" checked>EN</igc-radio>
    <igc-radio name="locale" value="de">DE</igc-radio>
    <igc-radio name="locale" value="fr">FR</igc-radio>
    <igc-radio name="locale" value="ar">AR</igc-radio>
    <igc-radio name="locale" value="ja">JA</igc-radio>
</igc-radio-group>

<igc-calendar
    id="calendar1"
    week-start="monday"
>
</igc-calendar>

this.calendar = document.getElementById('calendar1') as IgcCalendarComponent;
this.calendar.formatOptions = {
    month: 'short',
    weekday: 'short'
};

this.radios = document.querySelectorAll('igc-radio') as NodeListOf<IgcRadioComponent>;
this.radios.forEach(radio => {
    radio.addEventListener('igcChange', () => {
        if (radio.checked) {
            this.calendar.locale = radio.value;
        }
    });
})

Se tudo correr bem, agora devemos ter um Calendário com exibição personalizada, que também altera a representação da localidade, com base na seleção do usuário. Vamos dar uma olhada nisso:

Disabled dates

Em alguns casos, você gostaria de ter desabilitado as datas no Calendário que não podem ser selecionadas pelo usuário final. Essa funcionalidade é obtida usando a disabledDates propriedade. A disabledDates propriedade é uma matriz de DateRangeDescriptor objetos. Cada descritor tem um e Type, opcionalmente, um dateRange que é uma matriz de Date objetos.

Estas são as opções disponíveis para o Type imóvel:

After- desativa as datas após a primeira data no dateRange
Before- desativa as datas anteriores à primeira data no dateRange
Between- desativa as datas entre a primeira e a segunda data no dateRange
Specific- desativa dateRange as datas especificadas na matriz
Weekdays- desativa todos os dias da semana
Weekends- desativa todos os fins de semana

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

const today = new Date(Date.now());
const range = [
    new Date(today.getFullYear(), today.getMonth(), 3),
    new Date(today.getFullYear(), today.getMonth(), 8)
];

this.calendar.disabledDates = [{ type: DateRangeType.Between, dateRange: range }];

Essas configurações devem ter o seguinte resultado:

Special dates

A specialDates propriedade está usando quase os mesmos princípios de configuração que o disabledDates. As datas especiais têm uma aparência destacada e, ao contrário das para deficientes, podem ser selecionadas.

Vamos adicionar algumas datas especiais ao nosso calendário. Para fazer isso, criaremos um DateRangeDescriptor e passaremos as datas entre o 3º e o 8º dia do mês atual:

const today = new Date();
const range = [
    new Date(today.getFullYear(), today.getMonth(), 3),
    new Date(today.getFullYear(), today.getMonth(), 8)
];

this.calendar.specialDates = [{ type: DateRangeType.Between, dateRange: range }];

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

Week numbers

Você pode usar a showWeekNumbers propriedade para mostrar os números das semanas do componente Calendário. Você pode fazer isso usando seu atributo show-week-numbers booleano correspondente assim:

<igc-calendar show-week-numbers></igc-calendar>

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

Multiple Months

Usando a visibleMonths propriedade, você pode exibir mais de um mês quando o Calendário está em days exibição. Quando vários meses são exibidos, você pode configurar se deseja empilhá-los vertical ou horizontalmente usando a orientation propriedade. Por padrão, a orientation propriedade é definida como horizontal.

O Calendário exibe as datas iniciais e finais dos meses anteriores e seguintes. Você pode ocultar essas datas definindo a hideOutsideDays propriedade como true ou usando seu atributo hideOutsideDays booleano correspondente.

<igc-calendar visible-months="2" hide-outside-days></igc-calendar>

O exemplo a seguir demonstra a configuração de vários meses:

Tamanho

Você pode controlar o tamanho e o espaçamento dos elementos internos do calendário usando a variável CSS--ig-size. O tamanho padrão do componente é grande.

Eventos

O componente Calendar emite o evento Change quando as datas selecionadas são alteradas pelo usuário final. Você pode assinar o evento assim:

this.calendar.addEventListener('igcChange', ev => console.log(ev.detail));

Se você percorrer a página usando a Tab chave, lembre-se de que, com base nas recomendações de acessibilidade do W3, o IgcCalendarComponent introduz as seguintes paradas de tabulação:

Botão de seleção de mês
Botão de seleção de ano
Botão anterior
Botão Avançar
Elemento de data ativo

Quando um dia/mês/ano no IgcCalendarComponent componente estiver focado, use:

Tecla PageUp para mover para a página do mês/ano/anos anterior.
Tecla PageDown para mover para a próxima página do mês/ano/anos.
Tecla Home para focar o primeiro dia do mês atual/primeiro mês em exibição/primeiro ano em exibição.
Tecla End para focar o último dia do mês atual/último mês em exibição/último ano em exibição.
Teclas de seta para navegar pelos dias/meses/anos. Navegar antes do primeiro item e depois do último item alternará a visualização para a página do mês/ano/anos seguinte/anterior.

Quando um dia dentro da visualização days estiver focado, use:

Teclas Shift + PageUp para ir para o ano anterior.
Teclas Shift + PageDown para avançar para o próximo ano.
Pressione a tecla Espaço ou Enter para selecionar o dia em foco no momento.

Quando um mês dentro da visualização months estiver em foco, use:

Space ou Enter para alterar o activeDate para o mês focado no momento e alternar para days visualizar.

Quando um ano dentro da visualização years estiver focado, use:

Space ou Enter para alterar o activeDate ano atualmente focado e mudar para months visualizar.

Quando os botões anterior ou seguinte (no subtítulo) estiverem em foco, use:

Tecla de espaço ou Enter para alternar para a página do mês/ano/anos anterior/seguinte.

Quando o botão do mês (no subtítulo) estiver em destaque, use:

Pressione a tecla Espaço ou Enter para alternar para a visualização months.

Quando o botão do ano (no subtítulo) estiver em foco, use:

Pressione a tecla Espaço ou Enter para alternar para a visualização years.

Styling

O IgcCalendarComponent componente expõe partes CSS para quase todos os seus elementos internos. A tabela a seguir lista todas as partes CSS expostas:

Nome	Descrição
`header`	O elemento de cabeçalho.
`header-title`	O elemento de título do cabeçalho.
`header-date`	O elemento de data do cabeçalho.
`content`	O elemento de conteúdo que contém as visualizações e os elementos de navegação.
`navigation`	O elemento do contêiner de navegação.
`months-navigation`	O elemento do botão de navegação dos meses.
`years-navigation`	O elemento do botão de navegação de anos.
`years-range`	O elemento de intervalo de anos.
`navigation-buttons`	O contêiner de botões de navegação.
`navigation-button`	Botão de navegação anterior/próximo.
`days-view-container`	O elemento contêiner de visualização de dias.
`days-view`	Elemento de visualização de dias.
`months-view`	O elemento de visualização de meses.
`years-view`	O elemento de visualização de anos.
`days-row`	Elemento da linha Days.
`label`	Elemento de rótulo do cabeçalho da semana.
`week-number`	Elemento do número da semana.
`week-number-inner`	Elemento interno do número da semana.
`date`	Elemento de data.
`date-inner`	Elemento interno de data.
`first`	O primeiro elemento de data selecionado.
`last`	O último elemento de data selecionado.
`inactive`	Elemento de data inativo.
`hidden`	Elemento de data oculto.
`weekend`	Elemento de data de fim de semana.
`range`	Intervalo do elemento selecionado.
`special`	Elemento de data especial.
`disabled`	Elemento de data desabilitado.
`single`	Elemento de data selecionado individualmente.
`preview`	Elemento de data de pré-visualização da seleção de intervalo.
`month`	Elemento mês.
`month-inner`	Elemento interno do mês.
`year`	Elemento ano.
`year-inner`	Ano elemento interno.
`selected`	Indica o estado selecionado. Aplica-se a elementos de data, mês e ano.
`current`	Indica o estado atual. Aplica-se a elementos de data, mês e ano.

Usando essas partes CSS, podemos personalizar a IgcCalendarComponent aparência do componente assim:

igc-calendar::part(date-inner selected),
igc-calendar::part(month-inner selected),
igc-calendar::part(year-inner selected),
igc-calendar::part(month-inner selected):focus,
igc-calendar::part(year-inner selected):focus {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
}

igc-calendar::part(date-inner selected):hover,
igc-calendar::part(month-inner selected):hover,
igc-calendar::part(year-inner selected):hover {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
}

igc-calendar::part(label),
igc-calendar::part(navigation-button),
igc-calendar::part(months-navigation):hover,
igc-calendar::part(months-navigation):focus,
igc-calendar::part(years-navigation):hover,
igc-calendar::part(years-navigation):focus {
  color: var(--ig-primary-300);
}

igc-calendar::part(navigation-button):hover,
igc-calendar::part(navigation-button):focus {
  color: var(--ig-primary-800);
}

O exemplo a seguir demonstra a configuração CSS acima: