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
Saturday, March 21, 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
Saturday, March 21, 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