É 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.
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
Ctrl
enquanto seleciona os dias,Shift
e marcar duas datas para selecionar todas as datas intermediárias 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
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.
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
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. |
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
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