- Criado por Deborah Melo de Carvalho, última alteração por Igor Andrade em 26/01/2023
Função
É um widget de calendário que obtém os dias selecionados pelo usuário. Em suas configurações é possível definir funções como: data mínima e máxima a ser renderizado, visualização por dia, mês, ano ou década, seleção em uma ou várias datas, entre outros.
Uso
O componente permite que o usuário visualize e navegue pelo calendário de diferentes maneiras na aplicação.
Figura 1.1 - Estrutura do componente calendário
- Botões ‹ ›: retorna ou avança os períodos de tempo da visualização atual;
- Visualização: a cada clique, alterna a visualização do componente de dia para mês, de mês para ano e de ano para década. Para voltar a visualização anterior, deve selecionar no calendário o ano desejado, o mês desejado;
- Seleção dos dias: faz a seleção do(s) dia(s) conforme o clique do usuário. Para selecionar mais de um dia, o calendário deve estar habilitado para seleção múltipla e o usuário pode selecionar usando:
- a tecla
Ctrl
enquanto seleciona os dias, - a tecla
Shift
e marcar duas datas para selecionar todas as datas intermediárias - clicando em uma data e arrastando o cursor para selecionar todas as datas dentro da área;
- a tecla
- Data atual: indica a data atual. Ao clicar nela, será direcionado automaticamente para a visualização do tipo dia e com a data atual selecionada no componente, independentemente da visualização atual.
Visualização
O componente alterna entre quatro tipos de visualização: dia, mês, ano e década.
Figura 1.2.1 - Visualização por dia
Figura 1.2.2 - Visualização por mês
Figura 1.2.3 - Visualização por ano
Figura 1.2.4 - Visualização por década
Seleção de dias
Quando a configuração do calendário está com o tipo de seleção simples, o usuário somente poderá selecionar uma data - ao selecionar outra data, a data previamente selecionada terá sua seleção removida (Figura 1.3.1).
Figura 1.3.1 - Selecionando uma data por vez
Mas quando a configuração permite a seleção múltipla, o usuário poderá selecionar diversas datas por vez (Figura 1.3.2) - exceto datas que estiverem desabilitadas. Para selecionar mais de uma data, o usuário pode arrastar o mouse da data inicial até a data final, selecionando todas as datas entre elas, ou o usuário segura a tecla Ctrl
enquanto seleciona as datas desejadas.
Figura 1.3.2 - Selecionando várias datas
Use a tecla Shift
para selecionar uma data inicial, uma final e selecionar também todas as datas intermediárias.
Exibir número da semana
Ao habilitar essa opção no calendário, o usuário poderá ver o número da semana no calendário, destaque da figura 1.4.
Figura 1.4 - Exibir números da semana
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.
Nome | Propriedade | Função |
---|---|---|
Configurações | options | Abre a janela de configurações do Calendário. |
Valor | ng-model | Propriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Configurações
Ao adicionar o componente na área de edição, a janela Opções do Componente Calendário é aberta automaticamente. Mas, na aba propriedade da área de edição, essa janela pode ser aberta em Configurações. Nessa janela, é realizada todas as configurações e customizações necessárias para o funcionamento do componente (Figura 2.1).
Figura 2.1 - Janela de configuração do componente
- Tipo de Calendário: define o modelo que o componente será mostrado na aplicação, podendo ser moderno ou clássico.
- Tipo de Seleção: define o modo de seleção de dias no calendário:
- Simples: define que o usuário só poderá selecionar um dia;
- Múltipla: define que o usuário poderá selecionar mais de um dia.
- Exibir Número da Semana: adiciona uma coluna no calendário exibindo o número da semana.
- Visão Inicial: define o tipo de visualização quando o calendário é renderizado na tela pela primeira vez, podendo ser por dia, mês, ano ou década.
- Data Inicial: define a data inicial que será selecionada e visualizada (por padrão, é a data atual), através de um bloco de programação.
- Datas Selecionadas: define quais datas serão selecionadas quando o calendário é renderizado na aplicação, através de um bloco de programação.
- Datas Desabilitadas: define quais datas serão desabilitadas quando o calendário é renderizado na aplicação, através de um bloco de programação.
- Data Mínima: define a data mínima que o calendário irá mostrar, através de um bloco de programação.
- Data Máxima: define a data máxima que o calendário irá mostrar, através de um bloco de programação.
- Ao Mudar a Seleção: dispara um evento quando a data selecionada é alterada no calendário, através de um bloco de programação.
- Ao Navegar: dispara um evento enquanto o usuário navega pelo calendário, através de um bloco de programação.
Blocos de programação
O componente Calendário possui blocos de programação próprios para obter ou alterar informações, esses blocos estão localizados no menu lateral Calendário (destaque 1 da figura 2.2). No exemplo abaixo, ao clicar no botão, a função imprime no console do navegador o resultado do bloco obter data atual (Figura 2.2).
Para mais informações, acesse a documentação dos blocos de programação calendário.
Figura 2.2 - Obtendo conteúdo do calendário utilizando o seu próprio bloco
Nome em inglês
Calendar
Nessa página
Compatibilidade
Formulário web
Equivalente mobile
Não possui.
Botão do Componente
Imagem no Editor Visual