Week-view calendar with time axis and absolute-positioned event blocks.
Renders a 7-column time grid where events are positioned by their start time and sized by duration. No JavaScript — all positioning computed server-side.
Layout
- Left column: timezone label + hour labels (07:00–21:00)
- 7 day columns: day number, month+weekday subtitle, time grid with events
Event format
events = [
%{date: ~D[2024-04-25], time: "09:00", end_time: "12:00", label: "standup", color: "green"},
%{date: ~D[2024-04-26], time: "13:00", duration_minutes: 90, label: "review", color: "orange"},
]Supported colors: "green", "orange", "blue", "red", "purple", "gray".
Any other value falls back to bg-primary.
Pill label format
"{time} ({label})" when :label is present, otherwise just "{time}".
Example
<.calendar_week_view
week_start={~D[2024-04-25]}
events={@events}
timezone="GMT+5"
view="week"
on_view_change="cal-view"
on_event_click="cal-event"
/>Summary
Functions
Attributes
week_start(:any) (required) - First day of the week to display (Date.t()).events(:list) - List of event maps. Each must have:dateand:time. Defaults to[].start_hour(:integer) - First hour shown on the time axis (0–23). Defaults to7.end_hour(:integer) - Last hour (exclusive) on the time axis (1–24). Defaults to22.timezone(:string) - Timezone label shown top-left, e.g. "GMT+5". Defaults tonil.view(:string) - Currently active view — used to highlight the matching button in the switcher. Defaults to"week". Must be one of"month","week","day", or"list".on_view_change(:string) - LiveView event name fired when a view switcher button is clicked. Sendsphx-value-view. Defaults tonil.on_event_click(:string) - LiveView event name fired when an event block is clicked. Sendsphx-value-date,phx-value-time,phx-value-label. Defaults tonil.on_slot_click(:string) - LiveView event name fired when an empty time slot is clicked. Sendsphx-value-date. Defaults tonil.class(:string) - Defaults tonil.- Global attributes are accepted.