PhiaUi.Components.BadgeCalendar (phia_ui v0.1.17)

Copy Markdown View Source

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"
/>

Summary

Functions

badge_calendar(assigns)

Renders a month calendar with per-day badge counts.

Functions

badge_calendar(assigns)

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.