Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

Calendar

Calendário que mostra um mês e deixa a pessoa escolher um dia com mouse, toque ou teclado. Use quando a data está próxima e ver a semana ajuda, como numa consulta ou numa entrega.

Feito com React AriaPadrão WAI-ARIA GridComponente clienteCódigo ↗
minimal · light · #3fa34d

Data da consulta, outubro de 2026

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
weekdayStyle
firstDayOfWeek
readOnly
disabled

Instalação

Configure o Camaleo uma vez (Instalação) e importe o que precisar. As datas são objetos do @internationalized/date, reexportados pelo Camaleo.

import { Calendar, CalendarDate, isWeekend } from "@camaleo/react";

Anatomia

Um cabeçalho com o mês e duas setas, a grade de dias e um rodapé opcional. Cada parte tem um data-slot que você pode usar no CSS.

título‹ ›graderodapé
[data-slot="calendar"][data-slot="calendar-title"] · [data-slot="calendar-nav-button"] · [data-slot="calendar-footer"][data-slot="calendar-grid"] · [data-slot="calendar-cell"]

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.

minimal · light · #3fa34d

Data da consulta, outubro de 2026

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Data da mudança, outubro de 2026

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Mudança: quarta-feira, 14 de outubro de 2026

Controlado, com resumo

Escolha um dia. value e onChange guardam a data no seu estado, e a frase abaixo escreve ela por extenso, com o dia da semana.

Período de reservas, outubro de 2026

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Reservas abertas de 05/10 a 20/11.

Mínimo e máximo

minValue e maxValue desativam os dias fora do período, e as setas param no primeiro e no último mês.

Data de retirada, outubro de 2026

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Retiradas de segunda a sexta.

Fins de semana indisponíveis

isDateUnavailable com isWeekend segue o idioma. Dias indisponíveis continuam focáveis e são anunciados como indisponíveis, então diga o motivo no rodapé.

Estúdio de gravação, outubro de 2026

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Dias riscados estão lotados.

Dias lotados

Devolva true para os dias que a sua API diz estarem cheios. O risco não é o único sinal: o rodapé explica em palavras.

Planejamento da sprint, outubro de 2026

28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
As sprints começam na segunda.

Semana começando na segunda

O idioma define o primeiro dia: domingo no Brasil e nos EUA. firstDayOfWeek="mon" combina com um time que planeja em semanas ISO.

Data confirmada, outubro de 2026

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Para mudar, ligue para (11) 3456-7890.

Somente leitura

readOnly mostra uma data confirmada que a pessoa ainda navega e lê, diferente de disabled, que tira o calendário da ordem do Tab.

Confraternização de fim de ano, dezembro de 2026

29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
Nada escolhido ainda.

Abrir em outro mês

Sem valor, o calendário abre no mês de hoje. defaultFocusedValue abre no mês que a pessoa precisa, e renderiza igual no servidor e no navegador.

Em contexto

Calendários vivem em agendamentos e checkouts. São pedaços inteiros de interface para copiar, no estilo que você escolheu.

Agendar consulta

Dra. Helena Prado · Dermatologia

Data da consulta, novembro de 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5

Horários disponíveis

Agendar consultaCard · Calendar · ToggleGroup · Button

Escolha o dia da entrega

Grátis em dias úteis. Peça até as 18h.

Dia da entrega, novembro de 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
ter., 3 de nov.Grátis
Dia da entregaCard · Calendar · Button

Agendar pagamento

Conta de luz · R$ 287,40 · vence em 10/11

Data do pagamento, novembro de 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6 de nov. de 2026em dia
Agendar pagamentoCard · Calendar · Badge · Button

Boas práticas

Datas disponíveis, outubro de 2026

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Fechado aos fins de semana.
FaçaDiga por que os dias estão indisponíveis.

Uma linha curta no rodapé responde a dúvida antes de a pessoa sair clicando.

Datas disponíveis, outubro de 2026

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
EviteDias indisponíveis sem motivo.

A pessoa testa um por um, e o leitor de tela só diz "indisponível".

Data de retirada, outubro de 2026

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
FaçaCalendário para datas das próximas semanas.

O mês na tela é o mesmo de onde a pessoa vai escolher.

Data de nascimento, outubro de 2026

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
EviteCalendário para data de nascimento.

Chegar em 1994 leva centenas de cliques. Use um Date field e deixe a pessoa digitar.

Props

PropriedadeTipoPadrãoDescrição
classNamestring—Classes do elemento raiz.
styleCSSProperties—Estilos inline do elemento raiz.
disabledboolean—Desativa todos os dias e as setas, e tira a grade da ordem do Tab.
readOnlybooleanfalseMostra o valor sem deixar a pessoa mudar. Os dias continuam focáveis.
invalidboolean—Marca a seleção como inválida, para erros que vêm da sua aplicação.
localestring—Idioma BCP 47 dos nomes dos meses, dos dias da semana e do primeiro dia da semana, como "pt-BR". Por padrão, o do I18nProvider mais próximo ou o do navegador.
weekdayStyleWeekdayStyle"short"Como os dias da semana aparecem no cabeçalho: "narrow", "short" (padrão) ou "long".
previousLabelstring—Nome acessível da seta do mês anterior. Por padrão, o "Anterior" traduzido do React Aria.
nextLabelstring—Nome acessível da seta do próximo mês. Por padrão, o "Próximo" traduzido do React Aria.
footerReactNode—Conteúdo abaixo da grade: a data escolhida, uma legenda ou um preço.
valueDateValue | null—A data escolhida (controlado).
defaultValueDateValue | null—A data escolhida no início (não controlado).
onChange(value: DateValue) => void—Chamada quando a pessoa escolhe um dia.
minValueDateValue | null—A primeira data que pode ser escolhida.
maxValueDateValue | null—A última data que pode ser escolhida.
autoFocusbooleanfalseFoca o calendário ao montar.
focusedValueDateValue | null—O dia focado (controlado). Define também o mês visível.
defaultFocusedValueDateValue | null—O dia focado quando o calendário aparece (não controlado). Define o mês inicial.
onFocusChange(date: CalendarDate) => void—Chamada quando o dia focado muda, inclusive ao trocar de mês.
firstDayOfWeek"sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat"—O dia que começa a semana. Por padrão, o do idioma.
isDateUnavailable(date: DateValue) => boolean—Devolve true para os dias que não podem ser escolhidos, como fins de semana ou dias lotados.

As datas são objetos CalendarDate do @internationalized/date, reexportados pelo Camaleo junto com parseDate, today e isWeekend. As outras props de calendário do React Aria passam direto, como pageBehavior e createCalendar.

Styling hooks

Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio calendário.

Atributos

data-slot"calendar" · "calendar-header" · "calendar-grid" · "calendar-cell" · "calendar-footer"
data-selectedpresente no dia escolhido
data-todaypresente na data de hoje
data-unavailablepresente nos dias que o isDateUnavailable recusa
data-disabledpresente nos dias fora do mínimo/máximo, e na raiz quando desativado
data-outside-month · data-focus-visiblepresente nos dias do mês seguinte ou anterior · no foco por teclado

Tokens que ele lê

Cor

--cml-accent--cml-accent-fg--cml-accent-text--cml-border--cml-border-control--cml-button-outline-bg--cml-button-outline-border--cml-button-outline-shadow--cml-button-solid-shadow--cml-card-border--cml-card-shadow--cml-fg--cml-fg-muted--cml-fg-secondary--cml-focus-offset--cml-focus-ring--cml-focus-width--cml-radius-surface--cml-surface-raised

Forma e tamanho

--cml-border-width--cml-font-size-help--cml-radius-control-sm

Tipografia e movimento

--cml-duration-fast--cml-ease-standard--cml-font-control--cml-font-display--cml-font-label--cml-font-weight-display

Só deste componente

--cml-button-solid-image--cml-calendar-bg--cml-calendar-cell-font--cml-calendar-cell-radius--cml-calendar-cell-size--cml-calendar-cell-size-font--cml-calendar-cell-weight--cml-calendar-header-fg--cml-calendar-header-size--cml-calendar-header-tracking--cml-calendar-header-transform--cml-calendar-header-weight--cml-calendar-nav-radius--cml-calendar-nav-size--cml-calendar-padding--cml-calendar-radius--cml-calendar-range-border--cml-calendar-range-fg--cml-calendar-selected-bg--cml-calendar-selected-border--cml-calendar-selected-fg--cml-calendar-title-font--cml-calendar-title-size--cml-calendar-title-tracking--cml-calendar-title-transform--cml-calendar-title-weight--cml-calendar-today-bg--cml-calendar-today-border--cml-calendar-today-fg--cml-calendar-width--cml-corner-shape--cml-disabled-opacity--cml-item-highlight
/* dias redondos, só no fluxo de reserva */
.booking [data-slot="calendar"] {
  --cml-calendar-cell-radius: 999px;
}

Acessibilidade

SetasMovem o foco um dia, ou uma semana para cima e para baixo.
Home / EndLevam o foco ao primeiro ou ao último dia do mês.
Page Up / Page DownVão para o mês anterior ou o próximo. Com Shift, um ano.
Enter / EspaçoEscolhe o dia focado.
TabAlterna entre as setas e a grade.

Relacionados

Range calendarEscolha uma data de início e uma de fim.Date pickerUm campo de data com este calendário num popover.Date fieldDigite a data, segmento por segmento.
Esta página foi útil? · Editar esta página no GitHub