Calendar

Calendario en línea (estático o incrustado) que muestra de forma permanente una cuadrícula de días para uno o varios meses. A diferencia de DatePicker (que se oculta dentro de un popover para ahorrar espacio en formularios convencionales), Calendar se utiliza cuando el calendario debe ser protagonista y estar visible constantemente en la interfaz (por ejemplo, para flujos de reserva directa de citas, agendas o paneles de control). Admite selección única, múltiple o de rango interactivo.

junio de 2026

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { Calendar } from "@tsukira/ui"; // Fecha únicaconst [fecha, setFecha] = useState<Date | null>(null);<Calendar  value={fecha}  onChange={(v) => setFecha(v instanceof Date ? v : null)}/> // Rango de fechasconst [rango, setRango] = useState<DateRange>({ from: null, to: null });<Calendar  mode="range"  value={rango}  onChange={(v) => setRango(v as DateRange)}/>

Ejemplos#

Playground

cambia las props y el código se regenera

julio de 2026

mode

defaultMonth

month

weekStartsOn

disabled

footer

showToday

Inactivo

showOutsideDays

Inactivo

numberOfMonths

enableDragSelection

Inactivo

minDays

maxDays

fromDate

toDate

dayClassName

dayContent

width

Modo single

selección de fecha única — controlado

junio de 2026

Seleccionado: 11 jun 2026

Modo multiple

varias fechas independientes (toggle)

junio de 2026

4 fechas seleccionadas: 3, 9, 17, 25 jun

Modo range

arrastre o dos clics para definir el rango

junio de 2026

Desde: 10 jun 2026 · Hasta: 20 jun 2026

Dos meses en paralelo

numberOfMonths={2}

junio de 2026

julio de 2026

Fechas deshabilitadas

disabled con before/after y función predicate

before/after

junio de 2026

Fines de semana deshabilitados

junio de 2026

Restricción de navegación

fromDate + toDate — limitan los botones prev/next

junio de 2026

Contenido de día personalizado

dayContent — renderiza puntos en días con eventos

junio de 2026

Fusión: panel de evento con metadatos

Calendar + KeyValueList + Badge

junio de 2026

Fecha seleccionada20 jun 2026

EstadoFecha confirmada

Zona horariaEurope/Madrid (UTC+2)

Fusión: selector de vacaciones con rango y resumen

Calendar range + Badge de duración + Button

junio de 2026

Duración11 días

API#

CalendarPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'defaultValue' | 'onChange'>

Prop	Tipo	Default	Descripción
`mode`	`'single' \| 'multiple' \| 'range'`	—	Modo de selección.
`value`	`CalendarValue`	—	Valor controlado.
`onChange`	`((value: CalendarValue) => void)`	—	Cambio de valor.
`defaultValue`	`CalendarValue`	—	Valor inicial (uncontrolled).
`defaultMonth`	`Date`	—	Mes mostrado inicialmente.
`month`	`Date`	—	Mes controlado.
`onMonthChange`	`((month: Date) => void)`	—	Cambio de mes.
`locale`	`string`	'es'	Locale (Intl). Default 'es'.
`weekStartsOn`	`0 \| 1`	1	Día de inicio de la semana: 0 (domingo) o 1 (lunes). Default 1.
`disabled`	`CalendarDisabled`	—	Días deshabilitados.
`footer`	`ReactNode`	—	Footer custom.
`showToday`	`boolean`	true	Marcar día de hoy visualmente. Default true.
`showOutsideDays`	`boolean`	true	Mostrar días fuera del mes (de mes anterior/siguiente). Default true.
`numberOfMonths`	`number`	1	Cantidad de meses visibles en paralelo. Default 1.
`enableDragSelection`	`boolean`	true	Permitir arrastre para seleccionar rango (solo en mode='range'). Default true.
`minDays`	`number`	—	Mínimo de días que debe abarcar el rango (solo mode='range').
`maxDays`	`number`	—	Máximo de días que puede abarcar el rango (solo mode='range').
`onRangeInvalid`	`((info: { reason: 'min' \| 'max'; days: number; range: DateRange }) => void)`	—	Callback cuando una selección de rango es inválida (por min/max).
`fromDate`	`Date`	—	Limita la navegación: no permite ir antes de esta fecha.
`toDate`	`Date`	—	Limita la navegación: no permite ir después de esta fecha.
`onDayClick`	`((date: Date, event: React.MouseEvent) => void)`	—	Callback cuando el usuario hace click en un día (siempre, esté seleccionable o no).
`onDayMouseEnter`	`((date: Date) => void)`	—	Callback cuando el mouse entra a un día.
`onDayMouseLeave`	`((date: Date) => void)`	—	Callback cuando el mouse sale de un día.
`dayClassName`	`((date: Date) => string \| undefined)`	—	Class extra por día (ej. marcar días con eventos).
`dayContent`	`((date: Date) => ReactNode)`	—	Reemplaza el contenido por defecto del botón del día.
`width`	`number`	auto	Ancho del calendar (px). Default auto.