Day Agenda View
Calendar
Block
Timeline view showing all events for a single day with current time indicator.
Preview
Complete day view with hourly timeline and event cards
Today's Agenda
Thursday, April 16, 2026
08:00
09:00
Team Standup
09:00 · 30minZoom
JD
MK
SR
10:00
11:00
12:00
Focus Time
12:00 · 2h
13:00
14:00
15:00
16:00
17:00
With Current Time Indicator
Display current time line at a specific time
Today's Agenda
Thursday, April 16, 2026
Now
08:00
09:00
Morning Standup
09:00 · 30minZoom
JD
MK
SR
10:00
11:00
Design Review
11:00 · 1hConference Room A
JD
AL
12:00
13:00
14:00
15:00
16:00
17:00
Props
Component API reference
DayAgendaView
| Prop | Type | Default | Description |
|---|---|---|---|
events | DayEvent[] | Default events | Array of events for the day |
title | string | "Today's Agenda" | Header title text |
dateLabel | string | Current date | Date subtitle text |
timeSlots | string[] | 08:00-17:00 | Array of time slots to display |
currentTime | string | — | Current time for indicator (e.g., "10:30") |
onDayChange | (direction: 'prev' | 'next') => void | — | Callback when navigating days |
onTodayClick | () => void | — | Callback for "Today" button |
onEventClick | (event: DayEvent) => void | — | Callback when an event is clicked |
className | string | — | Additional CSS classes |
DayEvent
| Prop | Type | Default | Description |
|---|---|---|---|
id* | string | number | — | Unique identifier |
title* | string | — | Event title |
time* | string | — | Event start time |
duration* | string | — | Event duration |
type* | 'meeting' | 'call' | 'focus' | — | Event type |
attendees | string[] | — | Attendee initials |
location | string | — | Event location |
isVideo | boolean | — | Whether it is a video call |
description | string | — | Event description |
Usage
Import and implementation examples
import { DayAgendaView } from '@/blocks/calendar/day-agenda-view'
// With default events<DayAgendaView />
// Custom events and handlers<DayAgendaView title="My Schedule" dateLabel="Monday, January 15, 2024" events={[ { id: 1, title: 'Team Standup', time: '09:00', duration: '30min', type: 'meeting', attendees: ['JD', 'MK'], location: 'Zoom', isVideo: true }, { id: 2, title: 'Deep Work', time: '10:00', duration: '2h', type: 'focus', description: 'Focus on Q4 planning' } ]} currentTime="10:30" onEventClick={(event) => handleEventClick(event)} onDayChange={(direction) => handleDayChange(direction)} onTodayClick={() => handleTodayClick()}/>
// Custom time slots<DayAgendaView timeSlots={['06:00', '07:00', '08:00', '09:00', '10:00']}/>Built With
3 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Timeline view: Hourly time slots with scrollable container
- Current time indicator: Visual line showing current time
- Color-coded events: Different colors for meeting, call, and focus types
- Event metadata: Display time, duration, location, and attendees
- Attendee avatars: Show attendee initials in circles
- Video/location icons: Visual indicators for meeting type
- Day navigation: Previous/next day and "Today" buttons
- Interactive events: Click handlers and hover states
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
role="list" for event listaria-label for navigation buttonsaria-current for current time indicatorKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between events and controls |
| Enter | Select event or activate button |
| Arrow keys | Navigate between days |
Notes
- Screen readers announce event details
- Time slots are clearly labeled
- Focus indicators on interactive elements