# Day agenda

A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Events & bookings](https://beamline.io/components/apps/events-bookings) app. Live demo: https://beamline.io/components/day-agenda

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](https://beamline.io/components/team-calendar), [event-calendar](https://beamline.io/components/event-calendar)).
- Project boards with assignees and stages ([pipeline-views](https://beamline.io/components/pipeline-views), [kanban-board](https://beamline.io/components/kanban-board)).
- Calendar connection and daily-note template settings ([planner-setup](https://beamline.io/components/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](https://beamline.io/components/avatar.md)
- [Bottom sheet](https://beamline.io/components/bottom-sheet.md)
- [Button](https://beamline.io/components/button.md)
- [Calendar](https://beamline.io/components/calendar.md)
- [Checkbox](https://beamline.io/components/checkbox.md)
- [Date picker](https://beamline.io/components/date-picker.md)
- [Dropdown menu](https://beamline.io/components/dropdown-menu.md)
- [Label](https://beamline.io/components/label.md)
- [Number field](https://beamline.io/components/number-field.md)
- [Popover](https://beamline.io/components/popover.md)
- [Radio group](https://beamline.io/components/radio-group.md)
- [Recurrence editor](https://beamline.io/components/recurrence-editor.md)
- [Segmented control](https://beamline.io/components/segmented-control.md)
- [Select](https://beamline.io/components/select.md)
- [Spinner](https://beamline.io/components/spinner.md)
- [Tabs](https://beamline.io/components/tabs.md)
- [Text morph](https://beamline.io/components/text-morph.md)
- [Textarea](https://beamline.io/components/textarea.md)
- [Toggle group](https://beamline.io/components/toggle-group.md)
- [Tooltip](https://beamline.io/components/tooltip.md)

## Dependencies

`lucide-react`

## Import

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Events & bookings

- [Team calendar](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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…

Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).