componentes / calendar
Calendar
Calendário de um mês para escolher um dia ou um intervalo, com navegação completa pelo teclado.
Como usar
A base do `DatePicker` e do `DateRangePicker`, que também funciona sozinha (agendas, filtros, painéis). Os valores são `Date` do JavaScript que representam um dia: a hora é ignorada. Com `mode="range"`, o `value` é um objeto `{ from, to }`: o primeiro clique define o início, o segundo o fim, e um clique antes do início ou num intervalo completo recomeça.
preview
outubro de 2026
| dom. | seg. | ter. | qua. | qui. | sex. | sáb. |
|---|---|---|---|---|---|---|
outubro de 2026
| dom. | seg. | ter. | qua. | qui. | sex. | sáb. |
|---|---|---|---|---|---|---|
Calendar.tsx
import { Calendar } from "vaiperui"; const [date, setDate] = useState<Date>();const [period, setPeriod] = useState<DateRange>({}); <Calendar value={date} onValueChange={setDate} /><Calendar mode="range" value={period} onValueChange={setPeriod} />Dia único e intervalo
preview
outubro de 2026
| dom. | seg. | ter. | qua. | qui. | sex. | sáb. |
|---|---|---|---|---|---|---|
outubro de 2026
| dom. | seg. | ter. | qua. | qui. | sex. | sáb. |
|---|---|---|---|---|---|---|
modos.tsx
<Calendar defaultValue={new Date(2026, 9, 19)} /><Calendar mode="range" defaultValue={{ from: new Date(2026, 9, 12), to: new Date(2026, 9, 18) }} />Cores
preview
outubro de 2026
| dom. | seg. | ter. | qua. | qui. | sex. | sáb. |
|---|---|---|---|---|---|---|
outubro de 2026
| dom. | seg. | ter. | qua. | qui. | sex. | sáb. |
|---|---|---|---|---|---|---|
outubro de 2026
| dom. | seg. | ter. | qua. | qui. | sex. | sáb. |
|---|---|---|---|---|---|---|
outubro de 2026
| dom. | seg. | ter. | qua. | qui. | sex. | sáb. |
|---|---|---|---|---|---|---|
cores.tsx
<Calendar variantColor="primary" defaultValue={date} /><Calendar variantColor="success" defaultValue={date} /><Calendar variantColor="warning" defaultValue={date} /><Calendar variantColor="danger" defaultValue={date} />Limites
`minDate` e `maxDate` desabilitam os dias de fora e as setas de mês que levam até lá.
preview
outubro de 2026
| dom. | seg. | ter. | qua. | qui. | sex. | sáb. |
|---|---|---|---|---|---|---|
limites.tsx
<Calendar minDate={new Date(2026, 9, 10)} maxDate={new Date(2026, 9, 25)} />Idioma e primeiro dia da semana
preview
outubro de 2026
| seg. | ter. | qua. | qui. | sex. | sáb. | dom. |
|---|---|---|---|---|---|---|
octubre de 2026
| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
idioma.tsx
<Calendar locale="pt-BR" weekStartsOn={1} /><Calendar locale="es-ES" weekStartsOn={1} />Props
| Prop | Valores | Padrão | Descrição |
|---|---|---|---|
| mode | single | range | single | Um dia ou um intervalo. Muda o tipo do value |
| value / defaultValue | Date | { from?: Date; to?: Date } | nenhum | Seleção, controlada ou inicial |
| onValueChange | (date: Date) => void | (range: DateRange) => void | nenhum | Chamado a cada clique |
| autoFocus | boolean | false | Foca o dia ao montar; use quando o calendário abre dentro de um painel |
| minDate / maxDate | Date | nenhum | Primeiro e último dia permitidos; o resto e as setas de mês que levam para fora ficam desabilitados |
| locale | string | "en-US" | Idioma dos nomes de mês/dia e formato da data (BCP 47) |
| weekStartsOn | 0 – 6 | 0 | Primeiro dia da semana (0 = domingo) |
| previousMonthLabel / nextMonthLabel | string | "Previous month" / "Next month" | Nomes acessíveis dos botões de mês |
| variantColor / customColor / animation | primary | success | warning | danger / CSS color / none | smooth | fast | bounce | primary / smooth | Cor da seleção e do foco, e velocidade da transição |
Acessibilidade
- A grade é uma `<table role="grid">` nomeada pelo título do mês, com células `role="gridcell"` e cabeçalhos de dia da semana `<th scope="col">`.
- Cada dia é um `<button>` real, com `aria-label` contendo a data completa (por exemplo dia da semana, dia, mês, ano) no `locale`.
- Roving tabindex: só o dia em foco tem `tabIndex=0`, então o Tab passa pelo calendário em uma única parada.
- Dias selecionados (e todos os dias dentro de um intervalo) recebem `aria-selected` na célula; o dia de hoje recebe `aria-current="date"`.
- O título do mês é uma região `aria-live="polite"`, então a troca de mês é anunciada.
- Dias fora de `minDate`/`maxDate` são botões `disabled`; os botões anterior/próximo ficam desabilitados quando o mês estaria fora do limite.
Teclado
| Tecla | Ação |
|---|---|
| Tab / Shift+Tab | Entra e sai da grade (uma parada no dia em foco); também alcança os botões de mês anterior/próximo. |
| Arrow Left / Right | Move o foco um dia para trás / para frente. |
| Arrow Up / Down | Move o foco uma semana para trás / para frente. |
| Home / End | Move o foco para o primeiro / último dia da semana (conforme `weekStartsOn`). |
| Page Up / Page Down | Move o foco um mês para trás / para frente. |
| Shift + Page Up / Page Down | Move o foco um ano para trás / para frente. |
| Enter / Space | Seleciona o dia em foco (clique nativo do botão). |
Tenha em mente
- Passe `previousMonthLabel` e `nextMonthLabel` traduzidos; os padrões estão em inglês.
- Defina `locale` com o idioma da página: ele controla o título do mês, os nomes dos dias e o `aria-label` de cada dia.
- Teclas que levam a outro mês trocam o mês exibido, limitadas a `minDate`/`maxDate`; os botões anterior/próximo trocam o mês sem mover o foco para um dia.