Day agenda
A React block (a whole screen) in Beamline's Events & bookings app.
One person's days with notes, tasks and calendar events side by side, each kept as what it is. A task's scheduled day, deadline, reminder and repeat are four separate things: a missed plan rolls into today and says where it came from without becoming overdue, and only a passed deadline makes it overdue. Tasks move to another day by dragging or from a menu, and a move that fails leaves the task where it was, said. The same tasks show as Inbox, Today, Upcoming and All (grouped by their document, a deleted source said), so ticking one anywhere ticks it everywhere. A task is added without leaving the day, with where it goes and its day said, and a failed create keeps the text and never adds it twice. An event's notes sit under that day's daily note and stay when the event is removed; notes from an earlier version of a repeating event are shown apart, never attached.
Use it for
- A personal planner or notes app's day view: daily notes, tasks with dates, and synced calendar events together.
- A task list that must keep plan dates apart from deadlines (rolled over is not overdue).
Not for
- A team's shared calendar or room booking (team-calendar, event-calendar).
- Project boards with assignees and stages (pipeline-views, kanban-board).
- Calendar connection and daily-note template settings (planner-setup).
Anatomy
- header: the mark, the view (Days · Tasks), earlier / Today / later, Show (Notes · Tasks · Events), Add task
- days: a calendar legend; per day a date card (Today marked) and its daily note with event notes beneath, the events with their calendar's colour, and the tasks
- task row: done box, the task (a flag when high priority), its source document as a link (or Inbox / Daily note), From <day> when rolled over, Due or Overdue, the reminder, Repeats, a move menu; a failed move said under it
- tasks view: Inbox · Today · Upcoming · All with counts; Today's rolled-over group apart; All grouped by document
- detail: a task's dates on a strip of the days they fall on (planned as a dot, hollow where it was missed and carried to today; due as a flag, red once passed; the reminder as a bell; today lit), then Scheduled, Deadline, Reminder and Repeat as text, each changed from its pencil (what it means said while changing), Save and Revert while changed; an event's time, calendar, its notes, Create event note, earlier notes in the series and notes from an earlier series apart; a note's place and its event, or that the event is gone
- add task: the task, Goes into (daily note or a document), Scheduled for, High priority, Create
States
- empty day; notes only; mixed day; everything hidden
- scheduled; unscheduled (Inbox); rolled over; deadline overdue; reminder set; repeating; done; source unavailable
- moving; move failed (stays where it was)
- saving; save failed (edits kept); saved
- event with no note; note created; series notes; earlier series apart; event removed (note stays); calendar events off; sync failed
- add: empty text refused; creating; failed with the draft kept; created
Keyboard
- every row is a button; the done box and the source link are separate stops
- a task's move menu offers the next days and No date, so dragging is never the only way
- Add task opens a layer (a sheet on a phone): Enter creates, Shift+Enter adds a line, Escape closes and returns to Add task
Motion
Days, rows and the move target use their parts' own feedback; a moving task dims; nothing moves at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
today | Day | — | Today in the person's time zone. |
tasks | PlannerTask[] | — | Tasks with separate scheduled, deadline, reminderAt and repeat; controlled with onTasksChange, or defaultTasks. |
events | PlannerEvent[] | — | Synced calendar events. They belong to the calendar: the block never edits them. |
eventsStatus | "connected" | "off" | "failed" | — | connected: events are current; off: calendar events turned off; failed: the last sync failed (events shown are from lastSyncedAt). |
onCreateTask | (draft) => Promise<{ id } | { error }> | — | Create a task. Resolve with its id, or an error (the draft is kept and nothing is inserted). |
onMoveTask | (taskId, day | null) => Promise<{ error? } | void> | — | Move a task to another day (null: back to the inbox). |
onSaveTask | (task) => Promise<{ error? } | void> | — | Save a task's dates, reminder or repeat; resolve with an error to keep the edits unsaved. |
onCreateEventNote | (event) => Promise<PlannerNote | { error }> | — | Make a note from an event under that day's daily note. |
timeZone | string | — | |
defaultTasks | PlannerTask[] | — | |
onTasksChange | ((tasks: PlannerTask[]) => void) | — | |
documents (required) | PlannerDocument[] | — | |
calendars (required) | PlannerCalendar[] | — | |
lastSyncedAt | string | — | |
notes | PlannerNote[] | — | |
defaultNotes | PlannerNote[] | — | |
onCompleteTask | ((taskId: string, done: boolean) => void) | — | |
onOpenNote | ((noteId: string) => void) | — | |
onOpenDocument | ((documentId: string) => void) | — | |
onTabChange | ((tab: TaskTab) => void) | — | Remember the last tab where you keep settings. |
defaultView | "days" | "tasks" | — | |
defaultTab | TaskTab | — | |
defaultShow | Show[] | — | |
defaultStart | string | — | The first day shown; the agenda shows `days` days from it. Default: the day before today. |
days | number | — | |
defaultSelected | Selection | — | |
defaultAdding | boolean | — | |
defaultDraft | Partial<TaskDraft> | — | |
product | string | — | |
className | string | — | Classes on the documented visual root; no override by default. |
ref | Ref<HTMLDivElement> | — | Receives the documented native target or imperative handle; omitted by default. |
Built from
- Avatar
- Bottom sheet
- Button
- Calendar
- Checkbox
- Date picker
- Dropdown menu
- Label
- Number field
- Popover
- Radio group
- Recurrence editor
- Segmented control
- Select
- Spinner
- Tabs
- Text morph
- Textarea
- Toggle group
- Tooltip
Dependencies
lucide-react
Import
import { DayAgenda } from "@beamline/day-agenda";Get it
Day agenda is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent
More in Events & bookings
- Team calendar: A team's schedule: the people and shared calendars to show (each its colour), a month to jump by, who is out this week, and the week, day or month of…
- Crew booking: Booking crew for a project: each person with a strip of the project's days, days in the same state joined into one run said once (booked solid, available…
- Resource booking: Booking something shared (a room, a van, a camera kit). Choose what, then either a free hour on a day: a grid of starts the app says are free (a taken…
- Resource rules: Each person's scheduling rules beside their day, the day board leading: role, available (an unavailable day filled in the danger tint and said, a job…
- Desk booking: Desks in an office for the people who book them and the admin who sets how far ahead. Your days over the next weeks: booked with a desk, free to book…
- Linked appointments: A drop-off and a pickup kept as one linked pair on the week's calendar (the shared event calendar, day view on a phone), with the car's stay drawn…
- Waitlist desk: A front desk's waitlist beside the day's book: who is waiting (filters as chips, the queue's count apart from the day's), the day's bookings and the…
- Visitor desk: An office front desk's visitors. Invite a meeting's guests from the calendar: colleagues are shown but never invited, guests without an email are said…
- Issued ticket: One issued event ticket at the door, led by the ticket itself: what it admits to (event and venue), when, the section, seat and who it admits, and its…
- Itinerary: A trip's days where every event says who sees it, in words: everyone, only Ana and Ben, or hidden from Leo. The same rules give each traveller their own…
- Trip budget: A trip's money against its plan, in the trip's own currency. The budget (set or changed in place; a refused save keeps what was typed), what's spent and…
- Proposal payments: A travel proposal's money from the agent's side to the client's. Pricing: the price rule (markup on supplier cost, a fixed price, or net), what the…
- Project periods: A project's time periods (build, show, teardown) on one time scale, the thing being planned: each period a bar across its days with the crew and gear…