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

Month calendar where each day cell can show a small badge count at the top
and the day number at the bottom.

Unlike `EventCalendar` (which uses dot indicators per event), `BadgeCalendar`
shows a single numeric count badge per day — ideal for showing notification
counts, task counts, or any scalar metric alongside a calendar date.

## Features

- SUN-first column headers (`S M T W T F S`) — single-letter abbreviations
- Title formatted as `"November, 2024"`
- Badge count in primary color at the top of each cell (when count > 0)
- Day number at the bottom of each cell
- Selected day: dark filled card (`bg-foreground`) with inverted text colors
- Adjacent-month padding cells are invisible (`opacity-0`)
- Optional prev/next navigation buttons
- Optional `on_select` event for day clicks

## Badges format

    badges = %{
      ~D[2024-11-08] => 4,
      ~D[2024-11-15] => 2,
      ~D[2024-11-22] => 9
    }

## Examples

    <%!-- Basic --%>
    <.badge_calendar year={2024} month={11} />

    <%!-- With badges --%>
    <.badge_calendar year={2024} month={11} badges={@badges} />

    <%!-- With selection and navigation --%>
    <.badge_calendar
      year={2024}
      month={11}
      badges={@badges}
      selected_date={@selected}
      on_select="pick_date"
      on_prev="prev_month"
      on_next="next_month"
    />

# `badge_calendar`

Renders a month calendar with per-day badge counts.

## Example

    <.badge_calendar
      year={2024}
      month={11}
      badges={%{~D[2024-11-08] => 4}}
      selected_date={~D[2024-11-08]}
      on_select="pick_date"
    />

## Attributes

* `year` (`:integer`) (required) - Calendar year (e.g. 2024).
* `month` (`:integer`) (required) - Calendar month, 1–12.
* `badges` (`:map`) - Map of %{Date.t() => integer} — numeric badge count per day. Defaults to `%{}`.
* `selected_date` (`:any`) - Currently selected date (Date.t()). That cell gets the dark filled style. Defaults to `nil`.
* `on_select` (`:string`) - LiveView event fired when a current-month day is clicked. Receives `phx-value-date` (ISO 8601). Defaults to `nil`.
* `on_prev` (`:string`) - LiveView event fired by the prev (‹) button. Defaults to `nil`.
* `on_next` (`:string`) - LiveView event fired by the next (›) button. 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*