Compact Agenda Widget

Data Display

Dashboard

Dashboard widget showing upcoming events with quick add functionality.

Preview

Compact dashboard widget for displaying upcoming events

Upcoming

Team Standup

09:00

in 15 min

Product Review

10:30

Lunch with Sarah

12:30

Client Call

14:30

Custom Events

Pass custom events and handle interactions

Today's Schedule

Design Review

14:00

in 30 min

Coffee Chat

15:30

Investor Call

16:00

Props

Component API reference

CompactAgendaWidget

Prop	Type	Default	Description
`events`	`CompactEvent[]`	`Default events`	Array of events to display
`title`	`string`	`'Upcoming'`	Widget title text
`onViewAll`	`() => void`	—	Callback for "View all" button
`onAddEvent`	`() => void`	—	Callback for "Add Event" button
`onEventClick`	`(event: CompactEvent) => void`	—	Callback when an event is clicked
`className`	`string`	—	Additional CSS classes

CompactEvent

Prop	Type	Default	Description
`id*`	`string \| number`	—	Unique identifier
`title*`	`string`	—	Event title
`time*`	`string`	—	Event time
`type*`	`'meeting' \| 'call' \| 'personal'`	—	Event type for color coding
`inMinutes`	`number`	—	Minutes until event starts

Usage

Import and implementation examples

import { CompactAgendaWidget } from '@/blocks/calendar/compact-agenda-widget'

// With default events
<CompactAgendaWidget />

// Custom events and handlers
<CompactAgendaWidget
 title="Today's Schedule"
 events={[
 {
 id: 1,
 title: 'Team Standup',
 time: '09:00',
 type: 'meeting',
 inMinutes: 15
 },
 {
 id: 2,
 title: 'Client Call',
 time: '14:30',
 type: 'call'
 }
 ]}
 onEventClick={(event) => handleEventClick(event)}
 onAddEvent={() => handleAddEvent()}
 onViewAll={() => handleViewAll()}
/>

Built With

1 component

This block uses the following UI components from the design system:

Calendar

Features

Built-in functionality

Compact design: Perfect for dashboard sidebars and widgets
Color-coded events: Three event types with distinct colors
Time indicators: Shows time until upcoming events
Quick add: Integrated "Add Event" button in footer
Interactive events: Hover states and click handlers
View all link: Navigate to full calendar view
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

role="list" for event listaria-label for action buttonsSemantic button elements

Keyboard Navigation

Key	Action
`Tab`	Navigate between events and buttons
`Enter`	Activate event or button

Notes

Screen readers announce event details
Focusable event items
Clear button labels for actions

Related Components

Calendar Day Agenda View Week Agenda View Quick Event Creator