Day Agenda
A scrolling day view with an hour grid, a live “now” line, events as blocks and click-an-empty-slot to add one.
day-agenda.tsxday-agenda.css
Checking access…
Overview
Events sit on an hour grid sized by duration; overlapping events split the width. A thin now-line moves with the clock and the view scrolls to it on load.
Click an empty half-hour slot to drop a new “Untitled” event there, then click it again to remove. Arrow keys move focus between events.
When to use
- Calendar apps, booking dashboards, daily planners.
When not to use
- Multi-day planning: use a week view.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/day-agenda.json$
npx shadcn@latest add https://sundaeui.dev/r/day-agenda.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/day-agenda.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/day-agenda.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy day-agenda.tsx and day-agenda.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { DayAgenda } from '@/components/sundae/day-agenda'
<DayAgenda />Props
| Prop | Type | Default |
|---|---|---|
events*Events in fractional hours (9.5 = 9:30). | { id: string; title: string; start: number; end: number }[] | — |
startHour / endHourVisible range. | number | 7 / 20 |
onAddCalled when an empty slot is clicked. | (start: number) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Each event is a button labelled with its title and time; empty slots are buttons labelled “Add event at 2:30 pm”.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-dag; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Day Agenda free?
- Day Agenda is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Day Agenda?
- Run npx shadcn@latest add https://sundaeui.dev/r/day-agenda.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Day Agenda support keyboard and screen readers?
- Each event is a button labelled with its title and time; empty slots are buttons labelled “Add event at 2:30 pm”. Reduced motion removes the movement and keeps every state change.
- Does Day Agenda respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All components →Event Calendar
Components · RefinedRSVP Card
Components · RefinedNext Meeting Card
Components · RefinedToast Stack
Components · Refined- Pro
Sheet Drawer
Components · Refined Avatar Stack
Components · Refined