Visão geral do calendário Blazor

    O componente Ignite UI for Blazor Calendar é leve e fácil de configurar. Ele é usado para mostrar datas e dias da semana. Também é a melhor maneira de fornecer visualizações mensais ou anuais para usuários finais. O controle Ignite UI for Blazor Calendar permite que você restrinja os intervalos de datas mínimo e máximo pelos quais as pessoas podem navegar.

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

    Blazor Calendar Example

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

    How To Create a Calendar in Blazor with Ignite UI

    Antes de usar o IgbCalendar, você precisa registrá-lo da seguinte forma:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbCalendarModule));

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente Ignite UI for Blazor IgbCalendar. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    Para uma introdução completa à Ignite UI for Blazor, leia o tópico Introdução.

    A maneira mais simples de começar a usar a Ignite UI for Blazor IgbCalendar é a seguinte:

    <IgbCalendar />

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

    <IgbCalendar Selection="@CalendarBaseSelection.Multiple" />

    Range Selection

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

    <IgbCalendar Selection="@CalendarBaseSelection.Range" />

    Active View and Date

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

    Week numbers

    Você pode usar a propriedade ShowWeekNumbers para mostrar os números da semana do componente Calendar. Você pode fazer isso usando seu atributo booleano correspondente show-week-numbers assim:

    <IgbCalendar ShowWeekNumbers="true" />

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

    Multiple Months

    Usando a propriedade VisibleMonths, você pode exibir mais de um mês quando o Calendário estiver na visualização de days. Quando vários meses são exibidos, você pode configurar se deseja empilhá-los verticalmente ou horizontalmente usando a propriedade Orientation. Por padrão, a propriedade Orientation é definida como horizontal.

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

    <IgbCalendar 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:

    <IgbCalendar Change="@OnCalendarChange" />

@code {
    public void OnCalendarChange(IgbComponentDataValueChangedEventArgs args)
    {

    }
}

    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 IgbCalendar 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 componente IgbCalendar 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:

    • Pressione a tecla Espaço ou Enter para alterar o ActiveDate para o mês em foco no momento e alternar para a visualização days.

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

    • Pressione a tecla Espaço ou Enter para alterar o ActiveDate para o ano em foco no momento e alternar para a visualização months.

    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

    The IgbCalendar component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:

    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.

    Using these CSS parts we can customize thе appearance of the IgbCalendar component like this:

    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