Todos los componentes (204)

Agenda del mes

Fechas y hora · MonthAgenda · .amset-agenda

Qué es y cuándo usarlo

El mes con los eventos marcados en cada día (hasta tres puntos de color y «+2» si hay más) y, al lado, la lista de lo que hay el día donde está el foco. La lista sigue al foco, no solo al clic: con las flechas se va leyendo la agenda entera sin abrir nada.

Cuándo usarlo

La agenda de una tienda o un taller: citas, recogidas, entregas, cierres.
onDaySelect para ir al detalle del día elegido (Intro, Espacio o clic).
initialDay es el día de partida y solo se lee al montar; para moverla desde la aplicación (un botón «Hoy», un enlace a un día), day y onDayChange.
Un evento sin time es de todo el día y sale el primero de la lista.
Para que un evento lleve a su pantalla (un simulacro, un examen, una cita): href en el evento lo hace un enlace, y onEventPress avisa de su key al pulsarlo (los que no llevan href pasan a ser botones).
min y max para acotar la agenda (desde que abrió la tienda, hasta donde hay calendario): los días de fuera salen apagados y el foco no pasa por ellos.
empty es lo que dice la lista de un día sin nada («Nada ese día» por defecto).

Cuándo no

Solo elegir un día, sin eventos que enseñar: Calendar, o DatePicker dentro de un formulario.
Elegir día y hora entre huecos libres: SlotPicker.
Un plan de tareas que duran varios días: Timeline.

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 el día.

Accesibilidad: el calendario se llama con label. Los puntos son adorno (aria-hidden): lo que cuenta es la lista, una sección con nombre («Eventos del jueves, 24 de septiembre»), y una región status que al moverse dice el día, cuántos eventos tiene y cuáles («jueves, 24 de septiembre: 3 eventos. Inventario, Revisión de stock a las 10:00…»), con las cifras y el plural del idioma. Con disabled la raíz lleva aria-disabled y el teclado no entra; la lista del día se sigue leyendo.

Estados de cada día: al pasar el ratón se sombrea y al pulsarlo cede un poco; el elegido va en el fondo suave de acento con un filo; hoy lleva el número en un círculo lleno (una forma, no solo un color); el foco de teclado es el anillo de 2 px por fuera. Los días fuera de min/max (o todos, con disabled) van en gris, también sus puntos, con el cursor de prohibido. Los del mes de al lado no se pueden enfocar ni elegir, así que se dejan en blanco sin perder su hueco.

Movimiento: al cambiar de día la lista entra de nuevo con un fundido corto, y al cambiar de mes los números y los puntos de la rejilla entran fundiéndose, sin que el foco salga de la celda.

Tamaños: sm, md (por defecto) y lg: celdas de 38, 44 o 52 px de alto, con el número, los puntos y la lista a juego, y los botones de mes del alto de un control (30, 36 o 44 px). Con el dedo ninguna celda baja de 44 px. Las siete columnas miden siempre lo mismo y a 320 px caben sin desbordar: si el «+N» no cabe junto a los puntos, baja una línea.

Aspecto fino: variables CSS en .amset-agenda:

Medidas: --amset-agenda-cell (alto de la celda), --amset-agenda-brand (el círculo del número), --amset-agenda-dot, --amset-agenda-time (la columna de horas de la lista), --amset-agenda-padding-event, --amset-agenda-radius, --amset-agenda-radius-event, --amset-agenda-slot (el hueco entre el mes y la lista), --amset-agenda-stripe (el grosor de la raya de color de cada evento),--amset-agenda-width y --amset-agenda-width-list (lo que pide cada parte antes de pasar la lista debajo) y --amset-agenda-target.
Letra: --amset-agenda-number, --amset-agenda-week, --amset-agenda-title (el mes y el día de la lista), --amset-agenda-font, --amset-agenda-description y --amset-agenda-more (el «+N»).
Colores: --amset-agenda-hover, --amset-agenda-selected, --amset-agenda-selected-border, --amset-agenda-selected-ink, --amset-agenda-today, --amset-agenda-today-ink, --amset-agenda-event-background y --amset-agenda-event-border. El de cada evento sale de su tone, con los seis del vocabulario común (accent por defecto). Los botones de mes son IconButton: --amset-button-*.

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide cómo se escriben el mes y los días.

Cómo se ve

<MonthAgenda
  label="Octubre"
  events={[
    { key: '1', title: 'Entrega del pedido', date: '2026-10-03' },
    { key: '2', title: 'Revision trimestral', date: '2026-10-15', time: '10:00' },
  ]}
/>

Props

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

Prop	Tipo	Para qué sirve
`events`obligatoria	`readonly AgendaEvent[]`	—
`label`obligatoria	`string`	De que es la agenda. Obligatoria: nombra el calendario.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`day`	`string`	El dia que se enseña (el del foco, con su lista al lado), `AAAA-MM-DD`, llevado desde fuera junto con `onDayChange`. Es lo que hace falta para moverla desde la aplicacion: un boton «Hoy», un enlace a un dia.
`disabled`	`boolean`	Todo apagado y fuera del recorrido del teclado: ni se cambia de dia ni de mes. La lista se sigue leyendo.
`empty`	`string`	Lo que se dice cuando el dia no tiene nada.
`initialDay`	`string`	Sin `day`: el dia de partida, `AAAA-MM-DD`. Solo se lee al montar, como cualquier valor inicial; para cambiarlo despues, `day`. Por defecto, hoy.
`max`	`string`	El ultimo dia al que se puede ir, `AAAA-MM-DD`. Los de despues, apagados.
`min`	`string`	El primer dia al que se puede ir, `AAAA-MM-DD`. Los de antes salen apagados y el foco no pasa por ellos.
`onDayChange`	`(iso: string) => void`	Avisa con el dia nuevo cada vez que el foco pasa a otro dia.
`onDaySelect`	`(iso: string) => void`	Avisa con el dia elegido (Intro, Espacio o clic).
`onEventPress`	`(key: string) => void`	Avisa con la clave del evento pulsado en la lista del dia (los de `href` son enlaces y avisan al seguirlos).
`size`	`"sm" \| "md" \| "lg"`	Celdas de 38, 44 o 52 px de alto (`sm`, `md`, `lg`), la letra y los puntos a juego y los botones de mes del alto de un control. Con el dedo, ninguna celda baja de 44 px.

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.

Variable	Por defecto
`--amset-agenda-cell`	`calc(var(--amset-height-control) + var(--amset-space-2))`
`--amset-agenda-brand`	`1.375rem`
`--amset-agenda-dot`	`0.3125rem`
`--amset-agenda-number`	`var(--amset-text-sm)`
`--amset-agenda-week`	`var(--amset-text-xs)`
`--amset-agenda-title`	`var(--amset-text-base)`
`--amset-agenda-font`	`var(--amset-text-sm)`
`--amset-agenda-description`	`var(--amset-text-xs)`
`--amset-agenda-more`	`0.625rem`
`--amset-agenda-time`	`3.25rem`
`--amset-agenda-padding-event`	`var(--amset-space-2) var(--amset-space-3)`
`--amset-agenda-stripe`	`3px`
`--amset-agenda-radius`	`var(--amset-radius)`
`--amset-agenda-radius-event`	`var(--amset-radius-sm)`
`--amset-agenda-slot`	`var(--amset-space-5)`
`--amset-agenda-width`	`18rem`
`--amset-agenda-width-list`	`14rem`
`--amset-agenda-target`	`1.5rem`
`--amset-agenda-hover`	`var(--amset-divider)`
`--amset-agenda-selected`	`var(--amset-accent-soft)`
`--amset-agenda-selected-border`	`var(--amset-accent)`
`--amset-agenda-selected-ink`	`var(--amset-accent-text)`
`--amset-agenda-today`	`var(--amset-accent)`
`--amset-agenda-today-ink`	`var(--amset-accent-ink)`
`--amset-agenda-event-background`	`var(--amset-surface)`
`--amset-agenda-event-border`	`var(--amset-border)`

Cómo se cambia

.amset-agenda {
  --amset-agenda-cell: ...;
  --amset-agenda-brand: ...;
}

En el banco de pruebas

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