Todos los componentes (244)

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 elegido (día y hora), con un clic o con el teclado, 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.

Citas que se repiten (repeat): una cita con repeat se despliega sola en una por fecha, sin que quien la usa genere nada. freq (daily, weekly, monthly, yearly), interval, weekdays (en las semanales), until, count y except (fechas en las que no cae). Sigue las reglas de iCalendar: count cuenta lo que genera la regla y las excepciones se quitan después, y un mensual que cae un 31 se salta los meses de menos días. Cada vez lleva la clave serie#fecha (parseOccurrenceKey la lee) y onEventChange entrega además series y occurrence: «solo esta vez» o «toda la serie» lo decide quien la use.

Zonas horarias (timeZone): con la zona de la agenda, una cita escrita en otra (timeZone en la cita) se pinta a la hora de la agenda, con el horario de verano de cada fecha. Si cruza la medianoche en la zona de la agenda sale partida en un trozo por día, bloqueados. Lo que se mueve se entrega en la zona de la agenda y onEventChange lo dice en timeZone.

Recursos (resources): en la vista de día, una columna por sala o persona; la cita (resource) va a su columna, se pasa de una a otra arrastrándola o con Alt y las flechas izquierda y derecha, y onEventChange y onSlotSelect entregan el resource. En la vista de semana el reparto sigue siendo por días.

Cuándo no

Ver un mes entero con sus eventos: MonthAgenda. Elegir un hueco libre: SlotPicker.
Citas que duran varios días, o eventos de «todo el día»: no los trae. Las que cruzan la medianoche solo salen partidas cuando es la zona horaria la que las cruza.

Teclado: con onSlotSelect, Tab llega primero a la cuadrícula de huecos: las flechas mueven el cursor de hueco (de paso en paso y de día en día), Re Pág y Av Pág de hora en hora, Inicio y Fin van al primer y al último hueco del día, se anuncia el día y la hora, e Intro o Espacio eligen el hueco. Después, 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.

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 WeekAgendaEvent[]`	Las citas. Una puede llevar `repeat` (se repite), `timeZone` (sus horas son de otra zona) y `resource` (ocupa una sala o una persona): la agenda despliega, convierte y reparte sola.
`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.
`onRangeSelect`	`(range: { readonly date: string; readonly start: string; readonly end: string; readonly resource?: string; }) => void`	Avisa del tramo elegido: el dia y las horas de inicio y fin, ajustadas al paso. Se elige arrastrando por los huecos vacios de una columna, o con el teclado estirando el cursor de hueco con Mayus y las flechas de arriba y abajo e Intro. Un clic suelto sigue yendo a `onSlotSelect`. Con `onRangeSelect` y sin `onSlotSelect`, la cuadricula tambien ofrece el cursor de hueco para poder elegir con el teclado.
`onSlotSelect`	`(slot: { readonly date: string; readonly start: string; readonly resource?: string; }) => void`	Avisa del hueco elegido: el dia y la hora, ajustada al paso. Se elige con un clic o con el teclado: la cuadricula recibe el foco, las flechas mueven el cursor de hueco (Re Pag y Av Pag una hora; Inicio y Fin, el primero y el ultimo del dia), se anuncia el dia y la hora, e Intro o Espacio eligen. Sin esta prop la cuadricula no ofrece huecos.
`onViewChange`	`(view: WeekAgendaView) => void`	—
`readOnly`	`boolean`	Con `true`, las citas no se mueven ni se estiran.
`resources`	`readonly AgendaResource[]`	Reparte la vista de DIA en una columna por recurso, y una cita se mueve de un recurso a otro arrastrandola o con Alt y las flechas izquierda y derecha. Las citas sin recurso, o de uno que no esta en la lista, no salen en esa vista. La vista de semana sigue siendo por dias.
`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.
`timeZone`	`string`	La zona horaria (`Europe/Madrid`) en la que se leen y se escriben las horas de la agenda. Una cita con otra `timeZone` se pasa a esta, con el horario de verano de cada fecha, y si cruza la medianoche en ella sale partida en un trozo por dia (bloqueados). `onEventChange` entrega las horas en esta zona y lo dice en `timeZone`. Sin ella, las horas se dejan como vienen.
`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: