Ravox KitFormulário
Calendário
Mês em grade com a semana começando no domingo e os nomes vindos do Intl, sem biblioteca de datas. Um dia, um intervalo (com prévia ao passar o mouse) ou vários dias; datas travadas, mínimo e máximo, dois meses lado a lado e troca rápida de mês e ano pelo título.
| dom | seg | ter | qua | qui | sex | sáb |
|---|---|---|---|---|---|---|
Setembro 2026
Ajustes
Modo
Meses
Semana começa
Exemplos
Agenda com dias travados
| dom | seg | ter | qua | qui | sex | sáb |
|---|---|---|---|---|---|---|
Riscados: domingo ou agenda lotada.
Setembro 2026
Reserva por período
| dom | seg | ter | qua | qui | sex | sáb |
|---|---|---|---|---|---|---|
5 de out. – 8 de out.3 noites · R$ 1.020
Outubro 2026
Vários dias, semana na segunda
| seg | ter | qua | qui | sex | sáb | dom |
|---|---|---|---|---|---|---|
2 de 5 plantões escolhidos
Outubro 2026
Instalação
O shadcn cria components/ui/calendario.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/calendario.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| modo | "unico" | "intervalo" | "multiplo" | "unico" | O que se escolhe: um dia, início e fim, ou vários dias soltos. |
| valor / padrao | Date | null · { inicio?, fim? } · Date[] | — | Valor controlado ou inicial, no formato do modo. |
| aoTrocar | (valor) => void | — | Recebe o dia, o intervalo ou a lista de dias. No intervalo, é chamado no primeiro clique (só início) e no segundo. |
| min · max | Date | — | Primeiro e último dia possíveis. As setas e a troca de mês/ano respeitam os dois. |
| desabilitar | (dia: Date) => boolean | — | Trava dias específicos (domingos, feriados, agenda lotada). Continuam navegáveis pelo teclado. |
| maximo | number | — | Com modo="multiplo": quantos dias no máximo. |
| meses | 1 | 2 | 1 | Meses lado a lado (no celular, um embaixo do outro). |
| mes · mesPadrao · aoTrocarMes | Date · Date · (mes: Date) => void | — | Mês à mostra, controlado ou inicial (padrão: o do valor, ou o de hoje). |
| inicioSemana | 0 a 6 | 0 | Dia que abre a semana: 0 = domingo, 1 = segunda. |
| localidade | string | "pt-BR" | Idioma dos nomes de mês e de dia (Intl.DateTimeFormat). |
| diasFora | boolean | true | Mostra apagados os dias dos meses vizinhos que completam a grade. |
| focarAoMontar | boolean | false | Põe o foco no dia escolhido (ou hoje) ao aparecer. |
| rodape | ReactNode | — | Algo embaixo da grade: um resumo, um botão "Limpar". |
| ...props | ComponentProps<"div"> | — | Vão para o bloco de fora (className, aria-label…). |