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()}
/>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 elementsKeyboard 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