Calendar

Calendário standalone para seleção de datas. Construído sobre `react-day-picker` v10 com estilização do design system. Suporta modo único, múltiplo e range.

maio 2026

Utilização

index.tsx
import { Calendar } from "@convertcompany/ui";

O dia atual recebe um dot discreto abaixo do número (em vez de fundo sólido), permitindo distinguir hoje sem competir com o estado de seleção.

Exemplos

Range (intervalo)

maio 2026
junho 2026

Localização (i18n)

Passe um Locale do @convertcompany/ui/locale — esse pacote já reexporta todos os locales do date-fns.

index.tsx
import { Calendar } from "@convertcompany/ui";
import { ptBR } from "@convertcompany/ui/locale";

<Calendar mode="single" locale={ptBR} />
maio 2026

Desabilitar dias

index.tsx
// função: desabilita datas no passado
<Calendar
  mode="single"
  disabled={(d) => d < new Date(new Date().setHours(0, 0, 0, 0))}
/>

// range explícito
<Calendar
  mode="single"
  disabled={{ from: new Date(2025, 0, 1), to: new Date(2025, 11, 31) }}
/>

// dia da semana
<Calendar mode="single" disabled={{ dayOfWeek: [0, 6] }} />

Props principais

PropriedadeTipo
modeModo de seleção.
single
multiple
range
selectedValor selecionado. Tipo depende do modo (Date, Date[] ou DateRange).
Date
Date[]
DateRange
onSelectCallback de seleção.
(value) => void
localeLocale do date-fns para localizar nomes de meses/dias. Importe de `@convertcompany/ui/locale`.
DayPickerLocale
numberOfMonthsQuantos meses exibir lado a lado. Default 1.
number
captionLayoutLayout do cabeçalho do mês. `dropdown` permite navegação por dropdown de mês/ano.
label
dropdown
dropdown-months
dropdown-years
startMonth / endMonthLimites de navegação. Usado com captionLayout=dropdown.
Date
disabledDatas desabilitadas. Aceita Date, Date[], DateRange, função ou objeto matcher.
Matcher
Matcher[]
showOutsideDaysExibe dias do mês anterior/seguinte. Default true.
boolean
buttonVariantVariant dos botões de navegação (anterior/próximo).
ghost
outline
default
...

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