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 a seguir ReactIgrCalendar componente mostra um calendário básico com um modo de seleção de um único dia. 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

    Depois, você precisará importar o Ignite UI for ReactIgrCalendar e seu CSS necessário, assim:

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

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

    A maneira mais simples de começar a usar o Ignite UI for ReactIgrCalendar é 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 alcance. Por padrão, o Ignite UI for ReactIgrCalendar está usando o modo de seleção única, mas você pode mudar isso definindo aselection propriedade como mostrado neste exemplo.

    <IgrCalendar selection="multiple" />

    Range Selection

    Seguindo a mesma abordagem, podemos mudarselection para o modo de alcance:

    <IgrCalendar selection="range" />

    Active View and Date

    O componente Calendário Ignite UI for React permite alternar entre três visões diferentes: dias, meses e anos. AactiveView propriedade do componente reflete a visão atual. Por padrão, o Calendário exibe a data atual quando carregado inicialmente. Você pode modificar isso definindo aactiveDate propriedade. AactiveDate propriedade também reflete as mudanças na data atualmente visível feitas pelo usuário final.

    Header Options

    Por padrão, o componente Ignite UI for React Calendar gera uma área de cabeçalho que contém informações sobre as datas selecionadas. Você pode esconder o cabeçalho definindo aHasHeader propriedade como false. Você também pode configurarvertical ouhorizontal orientar o cabeçalho usando essaheaderOrientation propriedade.

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

    [!Note] Please note that the Ignite UI for React 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 React exibe umtitle espaço que permite personalizar o título do cabeçalho.

    <IgrCalendar selection="range" headerOrientation="vertical">
    <span slot="title">Trip dates</span>
</IgrCalendar>

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

    Localization and Formatting

    Devido à sua própria natureza, localização e formatação são essenciais para qualquer calendário. No Ignite UI for ReactIgrCalendar esses são controlados e personalizados pelas seguintes propriedades -locale,formatOptions,weekStart.

    Vamos tentar esses junto com outras customizações. A primeira coisa que precisamos definir é oweekStart, que controla o dia de início da semana. Ele é padrão,Sunday então vamos definir paraMonday. Também personalizaremos aformatOptions propriedade, especificando as opções usadas para formatar os meses e dias da semana nas visualizações do Calendário. Por fim, definiremos alocale propriedade com um valor, baseado na escolha de localização do usuário:

    <IgrRadioGroup alignment="horizontal" value={this.state.calendarLocale}>
    <IgrRadio name="lang" value="en" checked={true} onChange={this.onRadioChange}>
        <span>EN</span>
    </IgrRadio>
    <IgrRadio name="lang" value="de" onChange={this.onRadioChange}>
        <span>DE</span>
    </IgrRadio>
    <IgrRadio name="lang" value="fr" onChange={this.onRadioChange}>
        <span>FR</span>
    </IgrRadio>
    <IgrRadio name="lang" value="ar" onChange={this.onRadioChange}>
        <span>AR</span>
    </IgrRadio>
    <IgrRadio name="lang" value="ja" onChange={this.onRadioChange}>
        <span>JA</span>
    </IgrRadio>                    
</IgrRadioGroup>

<IgrCalendar weekStart='monday' formatOptions={this.state.calendarFormat} 
    locale={this.state.calendarLocale}
    value={new Date()}/>

    constructor(props: any) {
    super(props);
    this.onRadioChange = this.onRadioChange.bind(this);
    const formatOptions: IgrCalendarFormatOptions = {
        month: 'short',
        weekday: 'short',
    }
    this.state = { calendarLocale: "en", calendarFormat: formatOptions };
}

public onRadioChange(e: any) {
    if (e.detail.checked) {
        this.setState({ calendarLocale: e.detail.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ê vai querer ter datas desativadas no Calendário que não podem ser selecionadas pelo usuário final. Essa funcionalidade é alcançada utilizando adisabledDates propriedade. AdisabledDates propriedade é um array deDateRangeDescriptor objetos. Cada descritor possui umType e opcionalmente umdateRange que é um array deDate objetos.

    Estas são as opções disponíveis para aType propriedade:

    • After- desativa as datas após o primeiro encontro nodateRange
    • Before- desativa as datas antes da primeira data nodateRange
    • Between- desativa as datas entre a primeira e a segunda data nodateRange
    • Specific- desativa as datas especificadas nodateRange array
    • Weekdays- desativa durante toda a semana
    • Weekends- incapacita todos os finais 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 }];

    <IgrCalendar disabledDates={this.state.disabledDates}/>

    const today = new Date();
const range = [
    new Date(today.getFullYear(), today.getMonth(), 3),
    new Date(today.getFullYear(), today.getMonth(), 8)
];
const desc: DateRangeDescriptor = {
    dateRange: range,
    type: DateRangeType.Specific,
}
const disabledDates = [desc];
this.state = { disabledDates };

    Essas configurações devem ter o seguinte resultado:

    Special dates

    AspecialDates propriedade usa quase os mesmos princípios de configuração que odisabledDates. As datas especiais têm um visual e sensação destacadas e, ao contrário das datas com deficiência, podem ser selecionadas.

    Vamos adicionar algumas datas especiais ao nosso calendário. Para isso, vamos criar umDateRangeDescriptor e passar as datas entre o dia 3 e o 8 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 }];

    <IgrCalendar specialDates={this.state.specialDates}/>

    const today = new Date();
const range = [
    new Date(today.getFullYear(), today.getMonth(), 3),
    new Date(today.getFullYear(), today.getMonth(), 8)
]
const desc: DateRangeDescriptor = {
    dateRange: range,
    type: DateRangeType.Between,
}
const specialDates = [desc]
this.state = { specialDates };

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

    Week numbers

    Você pode usar ashowWeekNumbers propriedade para mostrar os números das semanas do componente Calendário. Você pode fazer isso usando seu atributoshow-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 avisibleMonths propriedade, você pode exibir mais de um mês quando o Calendário estiver nadays visualização. Quando vários meses são exibidos, você pode configurar se quer empilhá-los vertical ou horizontalmente usando aorientation propriedade. Por padrão, aorientation propriedade é definida comohorizontal.

    O Calendário exibe as datas de abertura e de final dos meses anteriores e seguintes. Você pode esconder essas datas definindo ahideOutsideDays propriedade como verdadeira ou usando seu atributohideOutsideDays booleano correspondente.

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

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

    Tamanho

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

    Eventos

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

    <IgrCalendar onChange={this.onCalendarChange} />

public onCalendarChange(e: IgrComponentDataValueChangedEventArgs) {

}

    Navegação pelo teclado

    Se você percorrer a página usando a TAB chave, deve ter em mente que, com base nas recomendações de acessibilidade do W3, elaIgrCalendar introduz os seguintes abados de abá:

    • 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 doIgrCalendar componente for focado, use:

    • PAGE UP chave para mover para a página do mês/ano/anos anterior.
    • PAGE DOWN chave para mover para a próxima página de mês/ano/anos.
    • HOME chave para focar o primeiro dia do mês atual/primeiro mês em vista/primeiro ano em vista.
    • END chave para focar o último dia do mês atual/último mês em view/último ano em view.
    • 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 dadays vista estiver focado, use:

    • SHIFT + PAGE UP para passar para o ano anterior.
    • SHIFT + PAGE DOWN chaves para passar para o próximo ano.
    • SPACE ou ENTER para selecionar o dia em foco no momento.

    Quando um mês dentro damonths vista estiver focado, use:

    • SPACE Ou ENTER a chave é mudaractiveDate para o mês focado atualmente e mudar paradays a visualização.

    Quando um ano dentro dayears vista estiver focado, use:

    • SPACE Ou ENTER a chave é mudaractiveDate para o ano focado atualmente e mudar paramonths o visualizar.

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

    • SPACE ou ENTER chave para mudar para a página anterior/próximo mês/ano/anos.

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

    • SPACE Ou ENTER chave para mudar paramonths a visualização.

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

    • SPACE Ou ENTER chave para mudar parayears a visualização.

    Styling

    OIgrCalendar componente expõe partes do 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 peças CSS, podemos personalizar a aparência doIgrCalendar 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