Server-rendered calendar component for date selection with keyboard navigation.

The calendar grid is built entirely server-side using Elixir's Date module. State (current month, selected date or range) lives in the parent LiveView. Day clicks and month navigation fire phx-click events back to the LiveView.

Supports two selection modes:

• :single — selects a single Date.t() value
• :range — highlights an interval between :range_start and :range_end

Keyboard navigation (Arrow keys, Enter, Home, End) is provided by the PhiaCalendar JS hook registered on the root element.

When to use

Use calendar/1 as the foundational date-picking primitive. Higher-level components compose it:

• date_picker/1 — wraps calendar/1 in a popover with a trigger button
• date_range_picker/1 — renders two calendar/1 instances side-by-side for range selection

Use calendar/1 directly when you want a permanently visible calendar (e.g. a booking widget, an event scheduler, a date navigator).

ARIA

The grid uses role="grid". Day-of-week headers use role="columnheader". Individual day cells use role="gridcell" with aria-selected and aria-disabled reflecting state. Disabled buttons have the disabled HTML attribute to prevent interaction and remove them from the tab order.

Single-date example

defmodule MyAppWeb.BookingLive do
  use Phoenix.LiveView

  def mount(_params, _session, socket) do
    today = Date.utc_today()
    {:ok, assign(socket,
      current_month: Date.beginning_of_month(today),
      selected_date: nil
    )}
  end

  def handle_event("date-selected", %{"date" => iso}, socket) do
    date = Date.from_iso8601!(iso)
    {:noreply, assign(socket, selected_date: date)}
  end

  def handle_event("calendar-prev-month", %{"month" => iso}, socket) do
    {:noreply, assign(socket, current_month: Date.from_iso8601!(iso))}
  end

  def handle_event("calendar-next-month", %{"month" => iso}, socket) do
    {:noreply, assign(socket, current_month: Date.from_iso8601!(iso))}
  end
end

<%!-- Template --%>
<.calendar
  id="booking-calendar"
  current_month={@current_month}
  value={@selected_date}
  on_change="date-selected"
  min={Date.utc_today()}
/>
<p :if={@selected_date}>
  Selected: {Calendar.strftime(@selected_date, "%B %d, %Y")}
</p>

Range selection example

<.calendar
  id="vacation-range"
  current_month={@current_month}
  mode="range"
  range_start={@check_in}
  range_end={@check_out}
  on_change="date-selected"
  min={Date.utc_today()}
/>

Disabling specific dates

Pass disabled_dates to block holiday or unavailable dates:

<.calendar
  id="appointment-picker"
  value={@appointment_date}
  disabled_dates={@fully_booked_dates}
  min={Date.utc_today()}
  max={Date.add(Date.utc_today(), 90)}
  on_change="date-selected"
/>

Hook setup

# app.js
import PhiaCalendar from "./hooks/calendar"
let liveSocket = new LiveSocket("/live", Socket, {
  hooks: { PhiaCalendar }
})