All components (204)

Week and day agenda

Dates and time · WeekAgenda · .amset-weekagenda

What it is and when to use it

The agenda of a week or a day: a grid of hours with appointments placed where they fall. Those that overlap go side by side; those that do not take the full width.

When to use it

Appointments, shifts, bookings: things with a start and end time within a day.
Appointments are dragged to another day or hour and stretched by the bottom edge. Everything snaps to the step (step, 15 min by default) and stays within the range shown (startHour to endHour).
The agenda saves nothing: it notifies through onEventChange and whoever uses it changes their appointments. If they do not, the appointment goes back to where it was.
readOnly leaves it view-only; an appointment with locked does not move even if the others do.
onSlotSelect reports the slot pressed (day and time) to create an appointment; onEventPress the appointment pressed.

On a narrow screen (under 40 rem of its own width, or with layout="compact") the grid does not fit and becomes a list of days like the Teams mobile one: on top, fixed, the strip with the days of the week (and the whole month if expanded); below, the days with their appointments, scrolled downward. The strip follows the list (the week on top is that of the day going by at the top), pressing a day takes the list to it and "Today" goes back to today. There, appointments are pressed (onEventPress), not dragged.

When not to

Seeing a whole month with its events: MonthAgenda. Choosing a free slot: SlotPicker.
Appointments that cross midnight or last several days, or "all day" events: it does not cover them.

Keyboard: Tab walks the appointments. Alt and the arrows move the appointment (up and down, the time; left and right, the day); Alt, Shift and up or down change its length. Every change is announced. Creating an appointment with the keyboard is up to the "new appointment" button of whoever uses it: pressing a slot is a pointer shortcut.

Accessibility: each appointment carries its day and time in its name ("Meeting, Thursday 15 October, from 10:00 to 11:00"); the title on top is a live region that announces the change of week; the "now" line and the hours in the margin are decorative.

Fine-tuning: --amset-weekagenda-hour (height of an hour), -gutter (width of the hours column), -height (maximum height with a fixed header), -radius and -now (colour of the now line).

What it looks like

Oct 11 – 17, 2026

WeekDay

Alt and the arrow keys move the appointment; Alt, Shift and the up or down arrows change its length.

Sun11

Mon12

Tue13

Wed14

Thu15

Fri16

Sat17

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

Props

Import it with import { WeekAgenda } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`events`required	`readonly AgendaBlock[]`	—
`label`required	`string`	What the agenda is about. Required: it names the grid.
`className`	`string`	Merged with the library classes; it does not replace them.
`day`	`string`	A day of the week that is shown (`YYYY-MM-DD`), controlled from outside. By default, today.
`endHour`	`number`	Last hour shown, not included (1 to 24). By default, 21.
`firstDayOfWeek`	`FirstDayOfWeek`	—
`initialDay`	`string`	—
`initialView`	`WeekAgendaView`	—
`layout`	`WeekAgendaLayout`	On a narrow screen (under 40 rem of its own width) the grid does not fit: it becomes a list of days with the week strip on top, like the Teams mobile one. `auto` (the default) decides by itself; `full` or `compact` force it. In the list appointments are pressed (`onEventPress`) but not dragged.
`onDayChange`	`(iso: string) => void`	—
`onEventChange`	`(change: AgendaChange) => void`	Notifies of an appointment that was moved or stretched, with the new day and times. The agenda does NOT change `events`.
`onEventPress`	`(key: string) => void`	Notifies of the appointment pressed (click, Enter or Space). If it is dragged, it does not count as pressing it.
`onSlotSelect`	`(slot: { readonly date: string; readonly start: string; }) => void`	Notifies of the slot pressed: the day and the time, snapped to the step. It is a pointer shortcut: creating with the keyboard is up to the "new appointment" button of whoever uses it.
`onViewChange`	`(view: WeekAgendaView) => void`	—
`readOnly`	`boolean`	With `true`, appointments are not moved or stretched.
`showWeekends`	`boolean`	With `false`, the week view does not paint Saturday or Sunday. By default, `true`.
`startHour`	`number`	First hour shown (0 to 23). By default, 7.
`step`	`number`	How many minutes it snaps to when moving or stretching: 5, 10, 15, 30 or 60. By default, 15.
`view`	`WeekAgendaView`	The view, controlled from outside: `week` or `day`.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-weekagenda-hour`	`3.5rem`
`--amset-weekagenda-gutter`	`3.5rem`
`--amset-weekagenda-radius`	`var(--amset-radius)`
`--amset-weekagenda-now`	`var(--amset-error-solid)`

How to change it

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

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: