React Calendar Overview

    O componente Calendário Ignite UI for React é 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 React permite restringir os intervalos de datas mínimo e máximo pelos quais as pessoas podem navegar.

    O Ignite UI para Ignite UI for React 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.

    React Calendar Example

    O exemplo de componente React IgrCalendar 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 React with Ignite UI

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Em seguida, você precisará importar o Ignite UI for React IgrCalendar, seu CSS necessário e registrar seu módulo, assim:

    import { IgrCalendarModule, IgrCalendar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCalendarModule.register();

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

    A maneira mais simples de começar a usar o Ignite UI for React IgrCalendar é a seguinte:

    <IgrCalendar />

    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 React IgrCalendar está usando o modo de seleção única, mas você pode alterá-lo definindo a selection propriedade conforme mostrado neste exemplo.

    <IgrCalendar selection="multiple" />

    Range Selection

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

    <IgrCalendar selection="range" />

    Active View and Date

    O componente Calendário Ignite UI for React 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.

    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:

    <IgrCalendar showWeekNumbers={true} />

    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.

    <IgrCalendar visibleMonths={2} hideOutsideDays={true} />

    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:

    <IgrCalendar change={this.onCalendarChange} />

public onCalendarChange(calendar: IgrCalendar, e: IgrComponentDataValueChangedEventArgs) {

}

    Navegação pelo teclado

    Se você percorrer a página usando a Tab chave, lembre-se de que, com base nas recomendações de acessibilidade do W3, o IgrCalendar 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 IgrCalendar 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 IgrCalendar 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 IgrCalendar 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:

    API References

    Additional Resources