# `PhiaUi.Components.EventCalendar`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/calendar/event_calendar.ex#L1)

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

| Element           | Purpose                                              |
|-------------------|------------------------------------------------------|
| Header            | Month + year label with prev/next navigation buttons |
| Column headers    | `Sun Mon Tue Wed Thu Fri Sat`                        |
| Day cells         | Padded grid of 35–42 cells; empty cells for padding  |
| Event badge       | Colored 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"
    />

# `event_calendar`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*