componentes / calendar

Calendar

Calendario de un mes para elegir un día o un intervalo, con navegación completa por teclado.

Cómo usar

La base de `DatePicker` y `DateRangePicker`, que también funciona sola (agendas, filtros, paneles). Los valores son `Date` de JavaScript que representan un día: la hora se ignora. Con `mode="range"`, `value` es un objeto `{ from, to }`: el primer clic define el inicio, el segundo el fin, y un clic antes del inicio o en un intervalo completo empieza de nuevo.

preview

octubre de 2026

lun	mar	mié	jue	vie	sáb	dom

octubre de 2026

lun	mar	mié	jue	vie	sáb	dom

Calendar.tsx

import { Calendar } from "vaiperui";
 
const [date, setDate] = useState<Date>();
const [period, setPeriod] = useState<DateRange>({});
 
<Calendar value={date} onValueChange={setDate} />
<Calendar mode="range" value={period} onValueChange={setPeriod} />

Día único e intervalo

preview

octubre de 2026

lun	mar	mié	jue	vie	sáb	dom

single

octubre de 2026

lun	mar	mié	jue	vie	sáb	dom

range

modos.tsx

<Calendar defaultValue={new Date(2026, 9, 19)} />
<Calendar mode="range" defaultValue={{ from: new Date(2026, 9, 12), to: new Date(2026, 9, 18) }} />

Colores

preview

octubre de 2026

lun	mar	mié	jue	vie	sáb	dom

primary

octubre de 2026

lun	mar	mié	jue	vie	sáb	dom

success

octubre de 2026

lun	mar	mié	jue	vie	sáb	dom

warning

octubre de 2026

lun	mar	mié	jue	vie	sáb	dom

danger

colores.tsx

<Calendar variantColor="primary" defaultValue={date} />
<Calendar variantColor="success" defaultValue={date} />
<Calendar variantColor="warning" defaultValue={date} />
<Calendar variantColor="danger" defaultValue={date} />

Límites

`minDate` y `maxDate` deshabilitan los días fuera y las flechas de mes que llevan allí.

preview

octubre de 2026

lun	mar	mié	jue	vie	sáb	dom

min / max

limites.tsx

<Calendar minDate={new Date(2026, 9, 10)} maxDate={new Date(2026, 9, 25)} />

Idioma y primer día de la semana

preview

outubro de 2026

pt-BR

octubre de 2026

lun	mar	mié	jue	vie	sáb	dom

es-ES

idioma.tsx

<Calendar locale="pt-BR" weekStartsOn={1} />
<Calendar locale="es-ES" weekStartsOn={1} />

Props

Prop	Valores	Predeterminado	Descripción
mode	single \| range	single	Un día o un intervalo. Cambia el tipo de value
value / defaultValue	Date \| { from?: Date; to?: Date }	ninguno	Selección, controlada o inicial
onValueChange	(date: Date) => void \| (range: DateRange) => void	ninguno	Se llama en cada clic
autoFocus	boolean	false	Enfoca el día al montar; úsalo cuando el calendario se abre dentro de un panel
minDate / maxDate	Date	ninguno	Primer y último día permitidos; el resto y las flechas de mes que llevan fuera quedan deshabilitados
locale	string	"en-US"	Idioma de los nombres de mes/día y formato de la fecha (BCP 47)
weekStartsOn	0 – 6	0	Primer día de la semana (0 = domingo)
previousMonthLabel / nextMonthLabel	string	"Previous month" / "Next month"	Nombres accesibles de los botones de mes
variantColor / customColor / animation	primary \| success \| warning \| danger / CSS color / none \| smooth \| fast \| bounce	primary / smooth	Color de la selección y del foco, y velocidad de la transición

Accesibilidad

La cuadrícula es una `<table role="grid">` nombrada por el título del mes, con celdas `role="gridcell"` y encabezados de día `<th scope="col">`.
Cada día es un `<button>` real, con `aria-label` que contiene la fecha completa (por ejemplo día de la semana, día, mes, año) en el `locale`.
Roving tabindex: solo el día enfocado tiene `tabIndex=0`, así que Tab recorre el calendario en una sola parada.
Los días seleccionados (y todos los días dentro de un intervalo) reciben `aria-selected` en la celda; hoy recibe `aria-current="date"`.
El título del mes es una región `aria-live="polite"`, así que el cambio de mes se anuncia.
Los días fuera de `minDate`/`maxDate` son botones `disabled`; los botones anterior/siguiente se deshabilitan cuando el mes quedaría fuera del límite.

Teclado

Tecla	Acción
Tab / Shift+Tab	Entra y sale de la cuadrícula (una parada en el día enfocado); también llega a los botones de mes anterior/siguiente.
Arrow Left / Right	Mueve el foco un día atrás / adelante.
Arrow Up / Down	Mueve el foco una semana atrás / adelante.
Home / End	Mueve el foco al primer / último día de la semana (según `weekStartsOn`).
Page Up / Page Down	Mueve el foco un mes atrás / adelante.
Shift + Page Up / Page Down	Mueve el foco un año atrás / adelante.
Enter / Space	Selecciona el día enfocado (clic nativo del botón).

Ten en cuenta

Pasa `previousMonthLabel` y `nextMonthLabel` traducidos; los valores por defecto están en inglés.
Define `locale` con el idioma de la página: controla el título del mes, los nombres de los días y el `aria-label` de cada día.
Las teclas que llevan a otro mes cambian el mes mostrado, limitadas a `minDate`/`maxDate`; los botones anterior/siguiente cambian el mes sin mover el foco a un día.

seg.	ter.	qua.	qui.	sex.	sáb.	dom.