Skip to main content

Calendar

O componente Calendar é utilizado para fornecer de maneira intuitiva a visualização e gerenciamento de datas importantes.

Quando usar?​

Quando é necessário selecionar uma data ou período.

Como usar?​

  • Geralmente, usado com um Input Text para apresentar a informação selecionada;
  • Usado em formulários ou filtros;
  • O Calendário tem uma largura fixa e não ajustável. Ele deve estar sempre alinhado à margem esquerda do campo de texto.

Anatomia​

Alt text

Tamanhos​

Alt text

Variações e estados​

O Calendar possui três principais variações: Day, Month e Year.

Alt text

Também, possui cinco estados diferentes:

  1. Default: representa dias do mês atual
  2. Current: exibe a data atual para o usuário
  3. Active: usuário clicar/selecionar, indica que foi ativo
  4. Inactive: indica dias não vigentes para o mês atual
  5. Hover: usuário passar o mouse, mostra que é possível interagir com o elemento
alt text

Comportamento​

O comportamento do calendar:

  1. Seleção de datas: o usuário pode escolher uma ou várias datas específicas. .
  2. Navegação no calendário: o usuário pode percorrer diferentes períodos, como meses ou anos, a fim de visualizar o calendário correspondente.
  3. Indicação de datas selecionadas: o calendário destaca de forma clara as datas selecionadas pelo usuário.