Agenda widget
StableA mini month with event markers and the chosen day’s agenda, for a dashboard.
AgendaWidget pairs a mini calendar, with up to three squares under days that have events, with the agenda of the day you pick, starting on today. It reads the same saved events and hidden calendars as the Calendar app, so changes made there show up here. Its one prop, href, says where “Open Calendar” goes. It brings no card, so the dashboard decides the frame.
Updated View source
Agenda on a dashboard
import { AgendaWidget } from '@rchursin/product/calendar'import { useRouter } from '@rchursin/product/lib/router'
/** * A mini month with event squares and the chosen day’s agenda. It reads the same saved events * as the Calendar app, so an event added there shows up here. * href sends “Open Calendar” to your own page; here, the tool’s page in this Library. */export default function AgendaWidgetExample() { const { href } = useRouter() return ( <div className="lux-card w-full max-w-[20rem] rounded-2xl bg-raised p-5"> <AgendaWidget href={href('/library/tools/calendar-app')} /> </div> )}Usage
import { AgendaWidget } from '@rchursin/product/calendar'<AgendaWidget href="/calendar" />API
AgendaWidget props
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | null | '#calendar' | Where the “Open Calendar” link goes: your Calendar page. The default is the product kit’s own anchor; null hides the link. |
Accessibility
Keyboard
| Key | What it does |
|---|---|
| Left arrowRight arrowUp arrowDown arrow | Move between days in the month. |
| Page UpPage Down | Previous or next month. |
| EnterSpace | Show that day’s agenda. |
| Tab | From the month to the Open Calendar link. |
- The month name is a polite live region, so paging is announced.
- Each day’s name includes its event count; the squares are decoration.
- The agenda is a section headed by an <h3> (“Today Tue, Oct 13”); each row reads in full, with time, title and calendar.
Guidelines
Do
- Wrap it in your dashboard’s card; it has no frame of its own.
Don’t
- Don’t expect editing here: it is read-only, and edits happen in the Calendar app.
In use
Used on this site
Related
- CalendarThe whole calendar: week, day, month and agenda views, calendars told apart by pattern, and create, edit and delete.
- Mini calendarA small month for sidebars and widgets, with up to three squares under days that have events.
- Agenda listEvents grouped by day under headings that can stick, earliest first, each with its time, calendar pattern and people.
- Tasks widgetYour open tasks for a dashboard, soonest due first: tick one to finish it, or change its status from its icon.
- Product kit overviewThe product kit’s front page: a Today screen built from every tool’s widget, a map of the kits and the shared parts.
Source
The component’s own files, exactly as they run on this site.
/** * AgendaWidget: the Calendar's piece of the Overview "Today" dashboard. A small month with * event squares, and the chosen day's agenda (today to start). It reads the same saved events * as the Calendar page, so changes made there show up here. No outer card: the Overview wraps it. * "Open Calendar" goes to `href` (the kit's #calendar page by default; null hides the link). */import { useId, useMemo, useState } from "react"import { sampleEvents, type CalendarEvent } from "../data/sample"import { Icon } from "../icons/Icon"import { dtf, relativeDay, startOfDay, toISODate } from "../lib/dates"import { useHydrated } from "../lib/hydration"import { AgendaList } from "./AgendaList"import { parseISODate, todayISO } from "./dates"import { countByDay, eventsOnDay, reviveEvents, type CalendarId } from "./events"import { useNow } from "./hooks"import { MiniCalendar } from "./MiniCalendar"import { useStoredState } from "./storage"
const freshEvents = () => sampleEvents()const noneHidden = (): CalendarId[] => []