A full-month calendar grid with range selection visualised as a continuous band.

Range visualisation:

• range_start: blue filled circle on the number + right-half band background connecting to the middle days.
• range_middle: full-width band background.
• range_end: blue filled circle on the number + left-half band background connecting from the middle days.
• single (start == end): blue filled circle only — no band.

State (current month, range boundaries) lives entirely in the parent LiveView. Day clicks and month navigation fire phx-click events.

Example

<.range_calendar
  year={@year}
  month={@month}
  range_start={@from}
  range_end={@to}
  on_select="pick_date"
  on_prev="prev_month"
  on_next="next_month"
/>

LiveView event handlers

def handle_event("pick_date", %{"date" => iso}, socket) do
  date = Date.from_iso8601!(iso)
  # two-click range protocol
  socket =
    cond do
      is_nil(socket.assigns.from) ->
        assign(socket, from: date, to: nil)
      is_nil(socket.assigns.to) and Date.compare(date, socket.assigns.from) != :lt ->
        assign(socket, to: date)
      true ->
        assign(socket, from: date, to: nil)
    end
  {:noreply, socket}
end

def handle_event("prev_month", _params, socket) do
  {:noreply, assign(socket, month: prev_month(socket.assigns.month, socket.assigns.year))}
end

Zero JavaScript

This component is entirely server-rendered. No JS hook is required.