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

1. Botões ‹ ›: retorna ou avança os períodos de tempo da visualização atual;
2. 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;
3. 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;
4. 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.

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