Calendar

<.calendar year={2026} month={6} />

Date Picker Composition

Calendar is the grid primitive. Pair it with popover and a hidden form input when you need a date-picker field.

<.form for={%{}} as={:booking} phx-change="jump_picker_month">
  <.label for="booking-date">Date</.label>
  <.popover id="booking-date-popover" class="p-0">
    <:trigger>
      <span class="inline-flex h-9 w-64 items-center justify-between rounded-md border px-3 text-sm">
        <span>{date_label(@picker_selected)}</span>
        <.icon name="lucide-calendar-days" class="size-4" />
      </span>
    </:trigger>
    <div class="grid grid-cols-[1fr_6rem] gap-2 border-b p-3">
      <label class="grid gap-1">
        <span class="text-xs text-muted-foreground">Month</span>
        <select id="booking-display-month" name="booking[display_month]" class="select h-8 w-full">
          <option :for={{label, month} <- month_options()} value={month} selected={month == @picker_month}>
            {label}
          </option>
        </select>
      </label>
      <label class="grid gap-1">
        <span class="text-xs text-muted-foreground">Year</span>
        <input
          id="booking-display-year"
          type="number"
          name="booking[display_year]"
          value={@picker_year}
          class="input h-8 w-full"
        />
      </label>
    </div>
    <.calendar
      id="booking-date-calendar"
      class="rounded-t-none border-0 shadow-none"
      year={@picker_year}
      month={@picker_month}
      selected={@picker_selected}
      select_event="select_picker_date"
      nav_event="nav_picker_month"
    />
  </.popover>
  <input type="hidden" name="booking[date]" value={date_value(@picker_selected)} />
</.form>

Interactive

Pass a select_event for date clicks and a nav_event for month navigation. The events carry different payloads — phx-value-date for selection, phx-value-year and phx-value-month for navigation.

<.calendar
  id="single-selection-calendar"
  year={@year}
  month={@month}
  selected={@selected}
  select_event="select_date"
  nav_event="nav_month"
/>
<p class="text-sm text-muted-foreground">
  Selected: <strong class="text-foreground">{@selected || "No date selected"}</strong>
</p>

Monday Start

Set week_start to choose the first weekday. Use 0 for Sunday, 1 for Monday, up to 6 for Saturday.

<.calendar year={2026} month={6} week_start={1} />

Range Selection

Use mode="range" with selected (range start) and range_end to highlight a span of dates. Dates between the endpoints get the calendar-day-in-range style.

<.calendar
  id="date-range-calendar"
  year={@range_year}
  month={@range_month}
  mode="range"
  selected={@range_start}
  range_end={@range_end}
  select_event="select_range_date"
  nav_event="nav_range_month"
/>
<div class="grid w-full max-w-xs grid-cols-2 gap-3 text-sm">
  <div>
    <p class="text-xs text-muted-foreground">Start</p>
    <p class="font-medium text-foreground">{date_label(@range_start)}</p>
  </div>
  <div>
    <p class="text-xs text-muted-foreground">End</p>
    <p class="font-medium text-foreground">{date_label(@range_end)}</p>
  </div>
</div>

Disabled Dates

Pass a list of Date structs or ISO strings to disabled_dates . Disabled dates can't be clicked and render with reduced opacity.

<.calendar
  year={2026}
  month={6}
  disabled_dates={[~D[2026-06-08], ~D[2026-06-09], ~D[2026-06-18], ~D[2026-06-25]]}
/>

Notes

• The parent LiveView owns date state. Click a selected date again to clear it, or keep the date selected in your event handler.
• Use select_event for date clicks and nav_event for month navigation. For year jumps, render your own controls around the calendar and assign year / month from the parent LiveView.
• Each day is a native <button> — keyboard-focusable and operable. The grid uses role="grid" with role="gridcell" .
• Days outside the displayed month are visually muted and marked with data-outside — they still render so the grid stays rectangular.