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

WeekCalendar — compact week navigator with prev/next header and day strip.

Renders a header row with a month/year title and optional prev/next arrow
buttons, plus a 7-column day strip showing the 3-letter weekday abbreviation
above the day number. The selected day is highlighted with a filled primary
pill card.

## Example

    <.week_calendar
      week_start={~D[2025-07-14]}
      selected_date={@selected}
      on_prev="prev_week"
      on_next="next_week"
      on_select="select_date"
    />

## Visual layout

    < July '25 >
  Fri  Sat  Sun [Mon] Tue  Wed  Thu
   14   15   16  [17]  18   19   20

# `week_calendar`

Renders a compact week navigator component.

The header displays a centred title (formatted via `:title_format`) flanked
by optional prev/next navigation buttons. Below the header, 7 day columns
each show the abbreviated weekday name and the calendar day number. The
`:selected_date` column is rendered with `bg-primary text-primary-foreground`
and a rounded pill style.

## Examples

    <%!-- Read-only week view --%>
    <.week_calendar week_start={~D[2025-07-14]} selected_date={~D[2025-07-17]} />

    <%!-- Full navigation and selection --%>
    <.week_calendar
      week_start={@week_start}
      selected_date={@selected}
      on_prev="prev_week"
      on_next="next_week"
      on_select="select_date"
    />

## Attributes

* `week_start` (`:any`) (required) - Date.t() — first day of the visible 7-day strip.
* `selected_date` (`:any`) - Date.t() or nil — the currently highlighted day. Defaults to `nil`.
* `on_select` (`:string`) - phx-click event name for day selection; receives phx-value-date (ISO 8601). Defaults to `nil`.
* `on_prev` (`:string`) - phx-click event name for the previous-week arrow button. Defaults to `nil`.
* `on_next` (`:string`) - phx-click event name for the next-week arrow button. Defaults to `nil`.
* `title_format` (`:string`) - strftime format string for the header title (default: "July '25"). Defaults to `"%B '%y"`.
* `class` (`:string`) - Additional CSS classes merged onto the wrapper element. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the wrapper div.

---

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