PhiaUi.Components.EventCalendar (phia_ui v0.1.17)

Copy Markdown View Source

Full-month event calendar with colored event badges per day.

Renders a 7-column month grid — like Google Calendar's month view — where each day cell can contain multiple color-coded event badges. Navigation between months is handled server-side via phx-click — no JavaScript needed.

Anatomy

ElementPurpose
HeaderMonth + year label with prev/next navigation buttons
Column headersSun Mon Tue Wed Thu Fri Sat
Day cellsPadded grid of 35–42 cells; empty cells for padding
Event badgeColored dot + truncated label per event

Events format

Pass a plain list of maps with :date, :label, and optional :color:

events = [
  %{date: ~D[2026-03-15], label: "Team standup", color: "blue"},
  %{date: ~D[2026-03-20], label: "Deploy v2", color: "green"},
  %{date: ~D[2026-03-25], label: "Deadline", color: "red"}
]

Supported colors: "blue", "green", "red", "yellow", "purple", "orange". Any other value falls back to bg-primary.

Navigation

Set on_navigate to a LiveView event name. Both prev and next buttons fire that event with phx-value-month and phx-value-year so your LiveView socket can update the assigns:

def handle_event("navigate_month", %{"month" => m, "year" => y}, socket) do
  {:noreply, assign(socket, month: String.to_integer(m), year: String.to_integer(y))}
end

Examples

<%!-- Basic (shows current month) --%>
<.event_calendar on_navigate="nav" events={@events} />

<%!-- Specific month --%>
<.event_calendar year={@year} month={@month} events={@events} on_navigate="nav" />

<%!-- Clickable days and events --%>
<.event_calendar
  year={@year}
  month={@month}
  events={@events}
  on_navigate="nav"
  on_day_click="pick_day"
  on_event_click="open_event"
/>

Summary

Functions

event_calendar(assigns)

Renders a full-month event calendar.

Functions

event_calendar(assigns)

Renders a full-month event calendar.

Example

<.event_calendar
  year={2026}
  month={3}
  events={[%{date: ~D[2026-03-15], label: "Sprint review", color: "blue"}]}
  on_navigate="nav"
/>

Attributes

  • year (:integer) - Calendar year. Defaults to the current year. Defaults to nil.
  • month (:integer) - Calendar month (1–12). Defaults to the current month. Defaults to nil.
  • events (:list) - List of event maps. Each map must have :date (Date.t()), :label (string). Optional :color ("blue"|"green"|"red"|"yellow"|"purple"|"orange"). Defaults to [].
  • on_navigate (:string) - LiveView event name fired by prev/next buttons. Receives phx-value-month and phx-value-year. Defaults to nil.
  • on_day_click (:string) - LiveView event name fired when a day cell is clicked. Receives phx-value-date (ISO 8601). Defaults to nil.
  • on_event_click (:string) - LiveView event name fired when an event badge is clicked. Receives phx-value-date and phx-value-label. Defaults to nil.
  • class (:string) - Additional CSS classes for the root element. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root <div> element.