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 · ✗ à construireBureau · ✓BêtaAffichage de données

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

Now · 10:50 AM

Web uniquement — React, depuis @krizaka/ui/agenda. Bêta : son API peut encore changer à une version mineure.

Mobile · ✗ à construire. 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

Pourquoi il est là. Used by Akinaza.

Quand l’utiliser

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

Quand ne pas l’utiliser

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

Installation

Installer

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

Styles

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

Importer

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

Exemples

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	Défaut	Description
`aria-label`requis	`string`	—	The agenda's accessible name (« Appointments of Monday »).
`items`requis	`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.

Accessibilité

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.

Clavier

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

Bonnes pratiques

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.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub