All components (204)

Month agenda

Dates and time · MonthAgenda · .amset-agenda

What it is and when to use it

The month with the events marked on each day (up to three colored dots and "+2" if there are more) and, beside it, the list of what is on the day where the focus is. The list follows the focus, not just the click: with the arrow keys the whole agenda can be read without opening anything.

When to use it

The agenda of a store or a workshop: appointments, pickups, deliveries, closings.
onDaySelect to go to the detail of the chosen day (Enter, Space or click).
initialDay is the starting day and is only read on mount; to move it from the application (a "Today" button, a link to a day), day and onDayChange.
An event without time is all-day and comes first in the list.
To make an event lead to its screen (a mock exam, a study session, an appointment): href on the event makes it a link, and onEventPress notifies its key when pressed (those without href become buttons).
min and max to bound the agenda (since the store opened, up to wherever the calendar goes): days outside are dimmed and focus does not pass through them.
empty is what the list says for a day with nothing ("Nothing that day" by default).

When not to

Only choosing a day, with no events to show: Calendar, or DatePicker inside a form.
Choosing a day and time among free slots: SlotPicker.
A plan of tasks that last several days: Timeline.

Keyboard: Tab goes through "Previous month", "Next month" and the grid. In the grid: the arrow keys move by days and weeks, Page Up and Page Down change the month (with Shift, the year), Home and End go to the first and the last day of the month, and Enter or Space choose the day.

Accessibility: the calendar is named with label. The dots are decoration (aria-hidden): what counts is the list, a section with a name ("Events on Thursday, September 24"), and a status region that, when moving, says the day, how many events it has and which ones ("Thursday, September 24: 3 events. Inventory, Stock review at 10:00…"), with the figures and the plural of the language. With disabled the root carries aria-disabled and the keyboard does not enter; the list for the day can still be read.

States of each day: on mouse hover it is shaded and when pressed it gives in a little; the chosen one goes on the soft accent background with a thin edge; today has its number in a filled circle (a shape, not just a color); keyboard focus is the 2 px ring on the outside. Days outside min/max (or all of them, with disabled) are gray, their dots too, with the not-allowed cursor. Those of the neighboring month cannot be focused or chosen, so they are left blank without losing their place.

Motion: when the day changes the list enters again with a short fade, and when the month changes the numbers and dots of the grid fade in, without focus leaving the cell.

Sizes: sm, md (default) and lg: cells 38, 44 or 52 px tall, with the number, the dots and the list to match, and the month buttons as tall as a control (30, 36 or 44 px). With a finger no cell goes below 44 px. The seven columns are always the same width and at 320 px they fit without overflowing: if the "+N" does not fit next to the dots, it drops to a new line.

Fine-tuning: CSS variables on .amset-agenda:

Measurements: --amset-agenda-cell (height of the cell), --amset-agenda-brand (the circle of the number), --amset-agenda-dot, --amset-agenda-time (the column of times in the list), --amset-agenda-padding-event, --amset-agenda-radius, --amset-agenda-radius-event, --amset-agenda-slot (the gap between the month and the list), --amset-agenda-stripe (the thickness of the colored line of each event),--amset-agenda-width and --amset-agenda-width-list (what each part asks for before the list drops below) and --amset-agenda-target.
Font: --amset-agenda-number, --amset-agenda-week, --amset-agenda-title (the month and the day of the list), --amset-agenda-font, --amset-agenda-description and --amset-agenda-more (the "+N").
Colors: --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 and --amset-agenda-event-border. That of each event comes from its tone, with the six of the common vocabulary (accent by default). The month buttons are IconButton: --amset-button-*.

Context: it goes inside LocaleProvider (or AmsetProvider), which decides how the month and the days are written.

What it looks like

<MonthAgenda
  label="October"
  events={[
    { key: '1', title: 'Order delivery', date: '2026-10-03' },
    { key: '2', title: 'Quarterly review', date: '2026-10-15', time: '10:00' },
  ]}
/>

Props

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

Prop	Type	What it does
`events`required	`readonly AgendaEvent[]`	—
`label`required	`string`	What the agenda is about. Required: it names the calendar.
`className`	`string`	Merged with the library classes; it does not replace them.
`day`	`string`	The day that is shown (the focused one, with its list beside it), `YYYY-MM-DD`, driven from outside together with `onDayChange`. It is what is needed to move it from the application: a "Today" button, a link to a day.
`disabled`	`boolean`	Everything is turned off and removed from the keyboard order: neither the day nor the month can be changed. The list can still be read.
`empty`	`string`	What is said when the day has nothing.
`initialDay`	`string`	Without `day`: the starting day, `YYYY-MM-DD`. It is only read on mounting, like any initial value; to change it afterwards, `day`. By default, today.
`max`	`string`	The last day that can be navigated to, `YYYY-MM-DD`. The ones after it are grayed out.
`min`	`string`	The first day that can be navigated to, `YYYY-MM-DD`. Earlier ones are dimmed and focus does not pass through them.
`onDayChange`	`(iso: string) => void`	Announces the new day each time focus moves to another day.
`onDaySelect`	`(iso: string) => void`	Called with the chosen day (Enter, Space or click).
`onEventPress`	`(key: string) => void`	Notifies with the key of the event pressed in the day list (those with `href` are links and notify when followed).
`size`	`"sm" \| "md" \| "lg"`	Cells 38, 44 or 52 px tall (`sm`, `md`, `lg`), with the font and the dots to match and the month buttons at the height of a control. With a finger, no cell goes below 44 px.

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-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)`

How to change it

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

In the test bench

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