DailyAgenda — daily schedule view with a large day header, compact week strip, and an event list with dotted separators.
The component displays:
- A large day-name header with month/day/year on the right
- An optional indicator dot (destructive colour) when the day has events
- A horizontal week strip showing 7 days centred on the selected date (3 days before + selected + 3 days after), with click-to-select support
- A vertical event list where entries are separated by dashed borders
CSS-only for layout; zero JS required. The week strip supports LiveView
event routing via on_date_select.
Examples
<%!-- Minimal — just the header and week strip --%>
<.daily_agenda date={@selected_date} />
<%!-- With events --%>
<.daily_agenda date={@selected_date} has_events on_date_select="pick_date">
<:event icon="✳">Daria's 20th Birthday</:event>
<:event icon="☀️" time="09:00">Wake up</:event>
<:event time="10:00">Design Crit</:event>
<:event time="13:00">Haircut with Vincent</:event>
</.daily_agenda>Summary
Functions
Renders a daily agenda card.
Functions
Renders a daily agenda card.
Examples
<.daily_agenda date={~D[2024-12-09]} has_events on_date_select="pick_date">
<:event icon="☀️" time="09:00">Wake up</:event>
<:event time="10:00">Design Crit</:event>
</.daily_agenda>Attributes
date(:any) (required) - Date.t() — the selected/current date.has_events(:boolean) - When true, renders a destructive indicator dot next to the day name. Defaults tofalse.on_date_select(:string) - phx-click event name fired when a week strip day is clicked. Defaults tonil.class(:string) - Additional CSS classes merged via cn/1. Defaults tonil.- Global attributes are accepted. HTML attributes forwarded to the root div.
Slots
event- An event entry in the agenda list. Accepts attributes:icon(:string) - Emoji or text icon (optional).time(:string) - Time label such as "09:00" (optional).