Calendar

Visão geral

Calendar envolve o react-day-picker v10. Três modos via mode:

• single - uma data
• range - início + fim (intervalo de datas)
• multiple - várias datas independentes

Use Calendar standalone em páginas com bastante espaço (agendamento, planners). Para forms compactos, envolva-o em Popover - esse padrão composto é o DatePicker. Na v10 do react-day-picker as chaves de classNames foram migradas para o enum UI; nós chamamos getDefaultClassNames() e mesclamos nossos tokens semânticos por cima.

Preview

'use client';import { Calendar } from '@gremorie/rx-forms';import { useState } from 'react';export function CalendarPreview() {  const [date, setDate] = useState<Date | undefined>(new Date());  return <Calendar mode="single" selected={date} onSelect={setDate} />;}

Anatomia

Calendar   self-contained DayPicker grid (caption + nav, weekday header, day buttons)

Instalação

Uso

import { Calendar } from "@gremorie/rx-forms";

export function Example() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());
  return <Calendar mode="single" selected={date} onSelect={setDate} />;
}

API

<Calendar>

Encaminha toda prop para DayPicker do react-day-picker. As mais relevantes:

Para a lista completa de props, veja a documentação do react-day-picker.

O wrapper do Gremorie customiza:

• button_previous / button_next - usam buttonVariants({ variant: "outline" }) para que as setas combinem com o resto do design system
• Chevron - troca os chevrons padrão do react-day-picker pelos ChevronLeftIcon / ChevronRightIcon do lucide
• selected - usa os tokens semânticos bg-primary text-primary-foreground
• today - usa bg-accent text-accent-foreground
• outside, disabled, hidden - todos orientados por token

Composição

1. <Calendar> é um widget autocontido. Coloque onde você precisa de um grid de data.
2. Para UI compacta, envolva-o em um Popover + PopoverTrigger - essa composição é exportada como DatePicker no bundle de overlays.
3. Para seletores de intervalo, defina mode="range" e numberOfMonths={2} para que os usuários vejam o mês de início + fim de uma vez.

Variações

Data única

O modo padrão. O estado é Date | undefined.

function SingleDate() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());
  return <Calendar mode="single" selected={date} onSelect={setDate} />;
}

Intervalo de datas

O estado é { from?: Date; to?: Date }. Combine com numberOfMonths={2} para a UX clássica de calendário lado a lado.

import type { DateRange } from 'react-day-picker';

function DateRangeExample() {
  const [range, setRange] = React.useState<DateRange | undefined>();
  return (
    <Calendar
      mode="range"
      selected={range}
      onSelect={setRange}
      numberOfMonths={2}
    />
  );
}

Desabilitar datas passadas

A prop disabled aceita um matcher. Use { before: today } para bloquear datas históricas.

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  disabled={{ before: new Date() }}
/>

Várias datas independentes

mode="multiple" deixa os usuários selecionarem qualquer número de datas não contíguas. O estado é Date[].

function MultipleDates() {
  const [dates, setDates] = React.useState<Date[] | undefined>();
  return <Calendar mode="multiple" selected={dates} onSelect={setDates} />;
}

Acessibilidade

• Semântica de grid: o react-day-picker renderiza um role="grid" com linhas de células. Cada célula é um botão.
• Teclado:
  • ArrowLeft / ArrowRight movem um dia por vez.
  • ArrowUp / ArrowDown movem uma semana por vez.
  • Home / End pulam para o primeiro / último dia da linha.
  • PageUp / PageDown movem um mês; Shift+PageUp / Shift+PageDown movem um ano.
• Anúncios de screen reader: a data em foco anuncia dia da semana, número do dia e mês. Dias desabilitados e de fora são anunciados como tal.
• Foco: quando envolvido em Popover (o padrão DatePicker), defina autoFocus para que a data ativa receba foco ao abrir.
• Reduced motion: o react-day-picker não tem movimento próprio; o calendário respeita as preferências de movimento do usuário automaticamente.

Relacionados

• Date Picker - a composição canônica Popover + Calendar
• Popover - o wrapper recomendado para UIs compactas
• Form - conecte o Calendar ao react-hook-form