The main calendar LiveComponent.
Manages internal state (current date, view mode, navigation) and renders the appropriate view. Communicates with the parent via callback functions.
Usage
<.live_component
module={PhoenixLiveCalendar.CalendarComponent}
id="my-calendar"
events={@events}
on_date_select={fn date -> send(self(), {:date_selected, date}) end}
on_event_click={fn event_id -> send(self(), {:event_clicked, event_id}) end}
/>Full example with all options
<.live_component
module={PhoenixLiveCalendar.CalendarComponent}
id="booking-calendar"
events={@events}
resources={@resources}
view={:week}
views={[:day, :week, :month]}
date={@current_date}
selected_date={@selected_date}
week_start={1}
min_time={~T[08:00:00]}
max_time={~T[20:00:00]}
slot_duration={15}
time_format={:h12}
business_hours={@business_hours}
translations={%{labels: %{today: "Aujourd'hui"}}}
dir={:ltr}
on_date_select={fn date -> send(self(), {:date_selected, date}) end}
on_range_select={fn range -> send(self(), {:range_selected, range}) end}
on_event_click={fn event_id -> send(self(), {:event_clicked, event_id}) end}
on_event_drop={fn data -> send(self(), {:event_dropped, data}) end}
on_view_change={fn data -> send(self(), {:view_changed, data}) end}
/>Slots
The underlying views' customization slots are forwarded through the
component — pass them as <.live_component> children:
<.live_component module={PhoenixLiveCalendar.CalendarComponent} id="cal" events={@events}>
<:event :let={event}>
<.my_event_chip event={event} />
</:event>
</.live_component>:event— custom event rendering (month, week, day, N-day, agenda, timeline, resource):day_cell— full month day-cell replacement (receives%{date: date, events: events, markers: markers}):time_label— time gutter labels (week, day, N-day):resource_label/:resource_header— timeline / resource column labels:day_header/:no_events— agenda day headings and empty state:info— toolbar info (ⓘ) disclosure content
Sizing
The calendar is an @container: the header and the month view compact
to the CONTAINER's width, not the viewport (the other views still key
their responsive tiers on the viewport for now). Container-query
containment strips intrinsic width, so the root carries w-full —
give the calendar a width-defining parent (any block/flex column
does); inside a shrink-to-fit context (inline-block, float, flex row
without a basis) a container-queried element cannot size itself by its
content.