Agenda

One day's appointments in time order: the times in tabular figures, the client, the service, a status chip, a small action — and a « now » line between the ones past and the ones to come.

Web · ✓Mobile · ✗ to buildDesktop · ✓BetaData display

import { Agenda } from "@krizaka/ui/agenda";

Now · 10:50 AM

Web only — React, from @krizaka/ui/agenda. Beta: its API may still change in a minor version.

Mobile · ✗ to build. The native twin ships with Akinaza's mobile Today (the same props over the native List); the web one is first because the owner's day is read on a computer at the counter. issue #275

Why it is here. Used by Akinaza.

When to use

The owner's day in a booking product: who comes, when, and what is next.
Any day-bound list where the time is the key and « now » matters (a shift, a timetable).

When not to use

What happened, newest first.Use instead: Activity feed
Records to sort, filter and page.Use instead: Data table
Picking a free time to book.Use instead: Slot picker

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Agenda } from "@krizaka/ui/agenda";

Examples

A day

Four appointments, the past dimmed, the « now » line between them, a quiet action on the next ones.

Now · 10:50 AM

Props

Prop	Type	Default	Description
`aria-label`required	`string`	—	The agenda's accessible name (« Appointments of Monday »).
`items`required	`readonly T[]`	—	The day's appointments, in any order: the agenda sorts them by start.
`action`	`((item: T) => ReactNode)`	—	A small control after the row (Start, End), outside the row's link.
`className`	`string`	—	Classes merged on the list.
`empty`	`ReactNode`	—	Shown when there is no item (an `EmptyState`).
`labels`	`Partial<AgendaLabels>`	—	The words, passed translated (the « now » line).
`linkAs`	`ElementType<any, keyof IntrinsicElements>`	—	The router's link for items with an `href` (`next/link`). Default `a`.
`locale`	`string`	`en-US`	The locale of the times. Default `en-US`.
`now`	`Date \| null`	—	The instant of the « now » line; `null` or absent hides it (a day that is not today).
`onSelect`	`((item: T) => void)`	—	Called with the item pressed, for items with no `href`.
`selectedId`	`string \| null`	—	The open item: marked `aria-current`.
`timeZone`	`string`	—	The time zone of the shop, so the times read the same on the server and on the phone.

Accessibility

An ordered list named by aria-label; the open row is aria-current.
The « now » line is a list item with its time in words.
The action is never inside the row's link.

Keyboard

Keys	Action
`Tab, Enter or Space`	Each row is one link or button; its action is the next stop.

Best practices

Pass the shop's timeZone and the page's locale, and now from the server, so both sides print the same times.
Put the day in the URL (a DayStrip above) and the open appointment in the URL too (href + linkAs).
One small contextual action per row (action), a quiet Button or an icon: never a full-width one.
Say the status in words in a Badge; the dot's colour only repeats it.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub