AgendaDay

One day's events as a list, with free gaps and a line for now.

SourcePackage @kerf-js/veneer

Preview

tsx

import { AgendaDay } from '@kerf-js/veneer'import type { CalEvent } from '@kerf-js/veneer-core'export function Today() {  return (  <div data-scope="agenda">    <AgendaDay      events={TEAM_EVENTS}      day={TODAY}      now={SCHEDULE_NOW}      locale="en-GB"      label="Tuesday"    />  </div>  )}const TODAY = '2026-11-03'const SCHEDULE_NOW = '2026-11-03T10:40'const TEAM_EVENTS: CalEvent[] = [  {    id: 'e1',    title: 'Platform standup',    start: '2026-11-02T09:00',    end: '2026-11-02T09:15',    cal: 1,    recurrence: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR',    location: 'Room Atlas',    attendees: ['Mara Lindqvist', 'Jun Tanaka'],  },  {    id: 'e2',    title: 'Platform standup',    start: '2026-11-03T09:00',    end: '2026-11-03T09:15',    cal: 1,    recurrence: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR',    location: 'Room Atlas',    attendees: ['Mara Lindqvist', 'Jun Tanaka'],  },  {    id: 'e3',    title: 'Checkout review',    start: '2026-11-03T10:00',    end: '2026-11-03T11:00',    cal: 2,    video: true,    attendees: [      'Priya Raman',      'Tomás Oliveira',      'Mara Lindqvist',    ],  },  {    id: 'e4',    title: 'Incident review: mobile-bff',    start: '2026-11-03T13:00',    end: '2026-11-03T13:45',    cal: 4,    video: true,    location: 'Room Birch',    attendees: ['Sam Okafor', 'Inés Vidal', 'Jun Tanaka'],  },  {    id: 'e5',    title: 'Ranking v2 handover',    start: '2026-11-03T15:00',    end: '2026-11-03T16:00',    cal: 3,    location: 'Room Cedar',    attendees: ['Lena Fischer', 'Noor Haddad'],  },  {    id: 'e6',    title: 'Priya out of office',    start: '2026-11-03',    end: '2026-11-03',    allDay: true,    cal: 6,  },  {    id: 'e7',    title: 'Release 2026.11',    start: '2026-11-04T11:00',    end: '2026-11-04T12:00',    cal: 5,    attendees: [      'Mara Lindqvist',      'Jun Tanaka',      'Tomás Oliveira',    ],  },  {    id: 'e8',    title: 'Design crit',    start: '2026-11-04T14:00',    end: '2026-11-04T15:00',    cal: 2,    tentative: true,    video: true,  },  {    id: 'e9',    title: 'Cost review',    start: '2026-11-05T10:00',    end: '2026-11-05T11:00',    cal: 1,    recurrence: 'FREQ=MONTHLY',    attendees: ['Mara Lindqvist', 'Lena Fischer'],  },  {    id: 'e10',    title: 'On-call handover',    start: '2026-11-06T16:00',    end: '2026-11-06T16:30',    cal: 1,    recurrence: 'FREQ=WEEKLY',    video: true,  },]

Installation

npm install @kerf-js/veneer

Usage

tsx

import { AgendaDay } from '@kerf-js/veneer'<div data-scope="agenda">  <AgendaDay    events={TEAM_EVENTS}    day={TODAY}    now={SCHEDULE_NOW}    locale="en-GB"    label="Tuesday"  /></div>

Nothing scheduled

An AgendaDay with no events on its day says nothing is scheduled.

tsx

import { AgendaDay } from '@kerf-js/veneer'import type { CalEvent } from '@kerf-js/veneer-core'export function Empty() {  return (  <div data-scope="agenda">    <AgendaDay      events={TEAM_EVENTS}      day="2026-11-07"      locale="en-GB"      label="Saturday"    />  </div>  )}const TEAM_EVENTS: CalEvent[] = [  {    id: 'e1',    title: 'Platform standup',    start: '2026-11-02T09:00',    end: '2026-11-02T09:15',    cal: 1,    recurrence: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR',    location: 'Room Atlas',    attendees: ['Mara Lindqvist', 'Jun Tanaka'],  },  {    id: 'e2',    title: 'Platform standup',    start: '2026-11-03T09:00',    end: '2026-11-03T09:15',    cal: 1,    recurrence: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR',    location: 'Room Atlas',    attendees: ['Mara Lindqvist', 'Jun Tanaka'],  },  {    id: 'e3',    title: 'Checkout review',    start: '2026-11-03T10:00',    end: '2026-11-03T11:00',    cal: 2,    video: true,    attendees: [      'Priya Raman',      'Tomás Oliveira',      'Mara Lindqvist',    ],  },  {    id: 'e4',    title: 'Incident review: mobile-bff',    start: '2026-11-03T13:00',    end: '2026-11-03T13:45',    cal: 4,    video: true,    location: 'Room Birch',    attendees: ['Sam Okafor', 'Inés Vidal', 'Jun Tanaka'],  },  {    id: 'e5',    title: 'Ranking v2 handover',    start: '2026-11-03T15:00',    end: '2026-11-03T16:00',    cal: 3,    location: 'Room Cedar',    attendees: ['Lena Fischer', 'Noor Haddad'],  },  {    id: 'e6',    title: 'Priya out of office',    start: '2026-11-03',    end: '2026-11-03',    allDay: true,    cal: 6,  },  {    id: 'e7',    title: 'Release 2026.11',    start: '2026-11-04T11:00',    end: '2026-11-04T12:00',    cal: 5,    attendees: [      'Mara Lindqvist',      'Jun Tanaka',      'Tomás Oliveira',    ],  },  {    id: 'e8',    title: 'Design crit',    start: '2026-11-04T14:00',    end: '2026-11-04T15:00',    cal: 2,    tentative: true,    video: true,  },  {    id: 'e9',    title: 'Cost review',    start: '2026-11-05T10:00',    end: '2026-11-05T11:00',    cal: 1,    recurrence: 'FREQ=MONTHLY',    attendees: ['Mara Lindqvist', 'Lena Fischer'],  },  {    id: 'e10',    title: 'On-call handover',    start: '2026-11-06T16:00',    end: '2026-11-06T16:30',    cal: 1,    recurrence: 'FREQ=WEEKLY',    video: true,  },]

When to use

Use it for

Today's events in a sidebar or a dashboard card

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`events`	`CalEvent[]`	—	Events for any days. Only `day`'s are shown.
`day`	`string`	—	The date to show.
`now`	`string \| null`	—	The wall time for the now line.
`locale`	`string`	—	The language and region used to format values.
`hourCycle`	`string`	—	`h12` for AM and PM, `h23` for a 24-hour clock. The locale's otherwise.
`label`	`string`	—	The list's accessible name.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="empty-state"] [data-part="description"]

description

RelatedAgenda