Saltar al contenido
EspañolEnglish
Todos los componentes (204)

Calendario

Fechas y hora · Calendar · .amset-calendar

Qué es y cuándo usarlo

El mes a la vista, sin desplegar nada: para elegir el día de una recogida, una cita o un periodo mirando qué días quedan libres. Con range elige dos extremos en vez de un día, y con months enseña hasta tres meses seguidos.

Cuándo usarlo

  • Cuando ver el mes es parte de la decisión: días libres, días cerrados, un periodo que cruza de mes.
  • isDateUnavailable para apagar días sueltos (fines de semana, festivos) y legend para explicar qué significan. minValue y maxValue acotan lo que se puede elegir.

Cuándo no

  • Una fecha dentro de un formulario: DatePicker, que se escribe con el teclado sin abrir nada (y DateRangePicker para dos).
  • El mes con eventos y la lista de cada día al lado: MonthAgenda.
  • Elegir día y hora de una agenda: SlotPicker.

Teclado: Tab pasa por «Mes anterior», «Mes siguiente» y la rejilla. En la rejilla: flechas por días y semanas, Re Pág y Av Pág cambian de mes (con Mayúsculas, de año), Inicio y Fin van al primer y al último día del mes, e Intro o Espacio eligen. Con range, el primero marca el inicio y el segundo el final.

Accesibilidad: label es el nombre del calendario (no hay etiqueta visible: la pone quien lo coloca, en una tarjeta o un título). La ayuda y el error se enlazan con aria-describedby: se leen con el calendario, no quedan sueltos debajo. Con error, además, el calendario queda no válido (data-invalid) y el día o los días elegidos llevan aria-invalid y el mensaje como descripción. Los días no disponibles no se pueden elegir.

Aspecto fino: --amset-calendar-day (lado de cada día: 28, 32 o 40 px según el tamaño, y encoge en una pantalla estrecha), --amset-calendar-slot, --amset-calendar-padding, --amset-calendar-font y --amset-calendar-nav (los botones de mes). Son las mismas del panel de DatePicker. Varios meses se ponen uno debajo de otro cuando no caben a lo ancho.

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide el nombre del mes y en qué día empieza la semana (firstDayOfWeek lo fija a mano).

Cómo se ve

Día de recogida en tienda, octubre de 2026

28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
Los fines de semana la tienda está cerrada

Recogida el 21/10/2026.

<Calendar
  label="Dia de recogida en tienda"
  value={dia}
  onChange={setDia}
  isDateUnavailable={esFinDeSemana}
  hint="Los fines de semana la tienda esta cerrada"
/>

Props

Se importa con import { Calendar } from '@amset/ui'. Las obligatorias van marcadas.

PropTipoPara qué sirve
labelobligatoriastringDe que es este calendario: "Fecha de entrega", "Dias con cita".
classNamestringSe une a las clases de la biblioteca, no las sustituye.
defaultFocusedValuePlainDate—
defaultValueDateRange | PlainDate | null—
disabledboolean—
errorstringMensaje de error. Al pasarlo, el calendario queda no valido: los dias elegidos se marcan con `aria-invalid` y el mensaje los describe.
firstDayOfWeekFirstDayOfWeekPor que dia empieza la semana. Sin esto manda el idioma -lunes en España, domingo en Estados Unidos-, que acierta casi siempre. Se fuerza cuando lo que manda no es el idioma: unos turnos que empiezan el sabado con la interfaz en castellano.
focusedValuePlainDateEl dia por el que se abre, si no hay nada elegido.
hintstring—
idstring—
invalidboolean—
isDateUnavailable(date: PlainDate) => booleanDias que no se pueden elegir aunque caigan dentro de los topes.
legendReactNodeLeyenda debajo: que significan las marcas.
maxValuePlainDate—
minValuePlainDate—
months3 | 2 | 1Cuantos meses se ven a la vez. Si no caben a lo ancho, se ponen uno debajo de otro.
onChange((value: PlainDate) => void) | ((value: DateRange) => void)—
onFocusChange(date: PlainDate) => void—
rangebooleanDos extremos en vez de un dia: del 1 al 30.
readOnlyboolean—
renderDay(date: PlainDate, number: string) => ReactNodePinta el interior de cada dia: el numero y, debajo, un precio, un punto de evento, una ocupacion. Recibe el dia y su numero ya escrito en el idioma. El nombre accesible del dia («lunes, 12 de octubre de 2026») no cambia.
size"sm" | "md" | "lg"Lado de cada dia: 28, 32 o 40 px. En una pantalla estrecha encoge para caber.
valueDateRange | PlainDate | null—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

VariablePor defecto
--amset-calendar-size2rem
--amset-calendar-daymin(var(--amset-calendar-size), calc((100vw - 7rem) / 7))
--amset-calendar-slot2px
--amset-calendar-paddingvar(--amset-space-3)
--amset-calendar-fontvar(--amset-text-sm)
--amset-calendar-nav1.875rem

Cómo se cambia

.amset-calendar {
  --amset-calendar-size: ...;
  --amset-calendar-day: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: