Todos los componentes (204)

Agenda de semana y día

Fechas y hora · WeekAgenda · .amset-weekagenda

Qué es y cuándo usarlo

La agenda de una semana o de un día: una cuadrícula de horas con las citas colocadas donde caen. Las que coinciden van una al lado de otra; las que no, a todo el ancho.

Cuándo usarla

Citas, turnos, reservas: cosas con hora de inicio y de fin dentro de un día.
Las citas se arrastran a otro día u otra hora y se estiran por el borde de abajo. Todo se ajusta al paso (step, 15 min por defecto) y se queda dentro del tramo que se ve (startHour a endHour).
La agenda no guarda nada: avisa con onEventChange y quien la use cambia sus citas. Si no las cambia, la cita vuelve a donde estaba.
readOnly la deja solo para ver; una cita con locked no se mueve aunque el resto sí.
onSlotSelect avisa del hueco pulsado (día y hora) para crear una cita; onEventPress de la cita pulsada.

En pantalla estrecha (menos de 40 rem de ancho propio, o con layout="compact") la cuadrícula no cabe y pasa a una lista de días como la del móvil de Teams: arriba, fija, la franja con los días de la semana (y el mes entero si se despliega); debajo, los días con sus citas, que se recorren hacia abajo. La franja sigue a la lista —la semana de arriba es la del día que va por arriba—, pulsar un día lleva la lista a él y «Hoy» vuelve a hoy. Ahí las citas se pulsan (onEventPress), no se arrastran.

Cuándo no

Ver un mes entero con sus eventos: MonthAgenda. Elegir un hueco libre: SlotPicker.
Citas que cruzan la medianoche o duran varios días, o eventos de «todo el día»: no los trae.

Teclado: Tab recorre las citas. Alt y las flechas mueven la cita (arriba y abajo, de hora; izquierda y derecha, de día); Alt, Mayús y arriba o abajo cambian su duración. Cada cambio se anuncia. Crear una cita con teclado es cosa del botón «nueva cita» de quien la use: pulsar un hueco es un atajo con el puntero.

Accesibilidad: cada cita lleva su día y su hora en el nombre («Reunión, jueves 15 de octubre, de 10:00 a 11:00»); el título de arriba es una región viva que anuncia el cambio de semana; la línea de «ahora» y las horas del margen son decorativas.

Aspecto fino: --amset-weekagenda-hour (alto de una hora), -gutter (ancho de la columna de horas), -height (alto máximo con cabecera fija), -radius y -now (color de la línea de ahora).

Cómo se ve

12–18 oct 2026

SemanaDía

Alt y las flechas mueven la cita; Alt, Mayús y las flechas arriba o abajo cambian su duración.

lun12

mar13

mié14

jue15

vie16

sáb17

dom18

<WeekAgenda
  label="Agenda del equipo"
  events={citas}
  initialDay="2026-10-15"
  startHour={8}
  endHour={18}
  onEventChange={aplicar}
/>

Props

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

Prop	Tipo	Para qué sirve
`events`obligatoria	`readonly AgendaBlock[]`	—
`label`obligatoria	`string`	De que es la agenda. Obligatoria: nombra la cuadricula.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`day`	`string`	Un dia de la semana que se enseña (`AAAA-MM-DD`), controlado desde fuera. Por defecto, hoy.
`endHour`	`number`	Ultima hora que se ve, sin incluirla (1 a 24). Por defecto, 21.
`firstDayOfWeek`	`FirstDayOfWeek`	—
`initialDay`	`string`	—
`initialView`	`WeekAgendaView`	—
`layout`	`WeekAgendaLayout`	En pantalla estrecha (menos de 40 rem de ancho propio) la cuadricula no cabe: se pasa a una lista de dias con la franja de la semana arriba, como la del movil de Teams. `auto` (por defecto) decide solo; `full` o `compact` lo fuerzan. En la lista las citas se pulsan (`onEventPress`) pero no se arrastran.
`onDayChange`	`(iso: string) => void`	—
`onEventChange`	`(change: AgendaChange) => void`	Avisa de una cita movida o estirada, con el dia y las horas nuevos. La agenda NO cambia `events`.
`onEventPress`	`(key: string) => void`	Avisa de la cita pulsada (clic, Intro o Espacio). Si se arrastra, no cuenta como pulsarla.
`onSlotSelect`	`(slot: { readonly date: string; readonly start: string; }) => void`	Avisa del hueco pulsado: el dia y la hora, ajustada al paso. Es un atajo con el puntero: crear con teclado es cosa del boton «nueva cita» de quien la use.
`onViewChange`	`(view: WeekAgendaView) => void`	—
`readOnly`	`boolean`	Con `true`, las citas no se mueven ni se estiran.
`showWeekends`	`boolean`	Con `false`, la vista de semana no pinta sabado ni domingo. Por defecto, `true`.
`startHour`	`number`	Primera hora que se ve (0 a 23). Por defecto, 7.
`step`	`number`	A cuantos minutos se ajusta al mover o estirar: 5, 10, 15, 30 o 60. Por defecto, 15.
`view`	`WeekAgendaView`	La vista, controlada desde fuera: `week` o `day`.

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-weekagenda-hour`	`3.5rem`
`--amset-weekagenda-gutter`	`3.5rem`
`--amset-weekagenda-radius`	`var(--amset-radius)`
`--amset-weekagenda-now`	`var(--amset-error-solid)`

Cómo se cambia

.amset-weekagenda {
  --amset-weekagenda-hour: ...;
  --amset-weekagenda-gutter: ...;
}

En el banco de pruebas

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