Calendar
Grade de dias do react-day-picker 9, em português e com a semana começando no domingo. As setas movem entre os dias, PageUp e PageDown trocam o mês e Home e End vão ao início e ao fim da semana.
Data única
Prazo de expiração do envelope. Dias antes do envio ficam indisponíveis.
Outubro de 2026
| dom | seg | ter | qua | qui | sex | sab |
|---|---|---|---|---|---|---|
O envelope expira em 31/10/2026.
Intervalo
Período do relatório de assinaturas, com dois meses lado a lado. No celular os meses empilham.
Setembro de 2026
| dom | seg | ter | qua | qui | sex | sab |
|---|---|---|---|---|---|---|
Outubro de 2026
| dom | seg | ter | qua | qui | sex | sab |
|---|---|---|---|---|---|---|
Relatório de 01/10/2026 a 15/10/2026.
Dias indisponíveis
Envio agendado só em dias úteis. Sábados e domingos aparecem riscados.
Outubro de 2026
| dom | seg | ter | qua | qui | sex | sab |
|---|---|---|---|---|---|---|
Nenhum envio agendado.
Props principais
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| mode | "single" | "multiple" | "range" | — | Tipo de seleção. Define o formato de selected e onSelect. |
| selected / onSelect | Date | Date[] | DateRange | — | Seleção controlada. |
| disabled | Matcher | Matcher[] | — | Dias indisponíveis: { before }, { after }, { dayOfWeek } ou datas. |
| numberOfMonths | number | 1 | Meses lado a lado. Empilham abaixo de 640px. |
| defaultMonth | Date | — | Mês exibido ao montar. |
| startMonth / endMonth | Date | — | Limite da navegação entre meses. |
| showOutsideDays | boolean | true | Mostra os dias do mês vizinho em tom mais fraco. |
const [expiresAt, setExpiresAt] = useState<Date>();
<Calendar
mode="single"
selected={expiresAt}
onSelect={setExpiresAt}
disabled={{ before: new Date() }}
/>