Componentes
Calendar
betaEscolha de data num grid de mês. Para intervalo, existe o Date Range Picker.
Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
@voxmente/ui/components/ui/calendar
Playground
<Calendar mode="single" selected={data} onSelect={setData} />Uso
Seleciona uma data. Sozinho, é o calendário puro — para abrir num campo de formulário, componha com popover; para um período pronto, use date-range-picker.
Intervalo
`mode="range"` seleciona um período contínuo — o mesmo modo por trás do date-range-picker, para quando o período do relatório precisa aparecer sem um botão de gatilho.
Sem dias fora do mês
`showOutsideDays={false}` deixa as células dos meses vizinhos vazias em vez de mostrar os dias adjacentes — reduz ruído numa grade densa.
Dias bloqueados
`disabled` recebe uma lista de datas — os dias sem aula ficam visíveis, mas não clicáveis. Use para feriados e dias que a escola não funciona.
Números da semana
`showWeekNumber` acrescenta uma coluna com o número da semana no ano — ajuda a localizar o período de um relatório sem contar mês a mês.
Tamanho da célula
O tamanho de cada dia vem da variável CSS `--cell-size`. Aumente para uma tela de agendamento onde o calendário é o conteúdo principal, não um campo auxiliar.
Atalhos de período
Presets não são uma prop do calendário — são botões ao lado que chamam `onSelect`. Útil para abrir direto num período comum de relatório, como os últimos 7 dias.
Referência da API
Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.
Calendar
| Prop | Tipo | Padrão |
|---|---|---|
| buttonVariant | "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | "ghost" |
Também aceita as props de outras.
CalendarDayButton
| Prop | Tipo | Padrão |
|---|---|---|
| locale | Partial<DayPickerLocale> | — |
Também aceita as props de React e outras, incluindo className e os atributos de DOM.
Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.
Origem do dado
- Demonstrações e playground: componente real de @voxmente/ui
- Referência da API: TypeScript do pacote
- Cor, espaçamento e raio das demonstrações: tokens de theme.css