AgendaList

AgendaList renders a scannable list of events for one date and shares its event shape with CalendarView.

#Default usage

<AgendaList
  date="2026-05-05T00:00:00.000Z"
  events={[
    {
      id: "planning",
      title: "Planning review",
      start: "2026-05-05T09:00:00.000Z",
      end: "2026-05-05T10:00:00.000Z",
      meta: "Product",
      tone: "info",
    },
    {
      id: "release",
      title: "Release window",
      start: "2026-05-05T14:00:00.000Z",
      end: "2026-05-05T15:30:00.000Z",
      meta: "Engineering",
      tone: "success",
    },
  ]}
/>

#Import

import { AgendaList, AgendaListItem } from "@froggdesign/enter-ui-react";

#Patterns

Use AgendaList beside CalendarView, in dashboard side panels, or in workflow pages where the selected day needs dense event detail.

#Accessibility

AgendaList renders a labelled section and semantic list. Each event is a button so selection is keyboard accessible.

#API

• events: CalendarView-compatible event objects.
• date: selected date.
• onEventSelect: called with the selected event.

#Styling

AgendaList uses .eui-agenda-list classes and FroggDesign tokens for layout, state, focus, and disabled styling.