Calendar
Calendário em português (react-day-picker) com células de 28px. Seleção de um dia, vários ou intervalo; vários meses; dropdown de mês e ano; dias desabilitados. Base do DatePicker.
Exemplos
Interaja com o componente e copie o código de cada exemplo.
Data única
outubro 2026
| dom | seg | ter | qua | qui | sex | sab |
|---|---|---|---|---|---|---|
Intervalo em dois meses
outubro 2026
| dom | seg | ter | qua | qui | sex | sab |
|---|---|---|---|---|---|---|
novembro 2026
| dom | seg | ter | qua | qui | sex | sab |
|---|---|---|---|---|---|---|
import { Calendar } from "@t2-educacao/midas";Uso
const [data, setData] = useState<Date | undefined>(new Date());
<Calendar mode="single" selected={data} onSelect={setData} className="rounded-lg border" />Para um campo que abre o calendário, use o DatePicker.
Props principais
Aceita todas as props do DayPicker mais:
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
mode | "single" | "multiple" | "range" | Tipo de seleção | |
selected / onSelect | Valor e mudança (Date, Date[] ou DateRange) | ||
numberOfMonths | number | 1 | Meses lado a lado |
captionLayout | "label" | "dropdown" | "dropdown-months" | "dropdown-years" | "label" | Cabeçalho com dropdown de mês/ano |
startMonth / endMonth | Date | Limites da navegação (necessários para o dropdown de ano) | |
disabled | Matcher | Dias desabilitados (ex.: { before: new Date() }) | |
locale | ptBR | Idioma | |
showOutsideDays | boolean | true | Mostra dias de outros meses esmaecidos |
Exemplos
Intervalo em dois meses
const [periodo, setPeriodo] = useState<DateRange | undefined>();
<Calendar mode="range" numberOfMonths={2} selected={periodo} onSelect={setPeriodo} />Data de nascimento (dropdown de mês e ano)
<Calendar
mode="single"
captionLayout="dropdown"
startMonth={new Date(1940, 0)}
endMonth={new Date()}
/>Bloquear datas passadas
<Calendar mode="single" disabled={{ before: new Date() }} />Acessibilidade
- Navegação completa por teclado: setas,
PageUp/PageDown(mês),Home/End. - Os dias têm nomes completos em português para leitores de tela.
ButtonGroup
Agrupa botões encostados, na horizontal ou vertical, com separador e texto opcionais. Usado em barras de ações, botões divididos (split) e campos com botão.
Card
Container com borda e cantos de 14px para agrupar conteúdo: Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent e CardFooter (rodapé em cinza). Tamanhos default e sm.