A full-month calendar grid where multiple individual (non-contiguous) dates can be toggled on/off.

Selected dates are rendered as individual filled rounded rectangles using bg-primary/20 text-primary font-semibold. This is distinct from RangeCalendar, which selects a contiguous band of dates.

The grid is SUN-first (Sun Mon Tue Wed Thu Fri Sat). Adjacent-month days are rendered faded (opacity-40) to fill the first and last rows.

Month and year navigation is provided through navigation buttons (on_prev, on_next) and/or <select> dropdowns (on_month_change, on_year_change). State (current month/year, selected dates) lives entirely in the parent LiveView.

Example

<.multi_select_calendar
  year={@year}
  month={@month}
  selected_dates={@selected_dates}
  on_select="toggle_date"
  on_prev="prev_month"
  on_next="next_month"
  on_month_change="month_changed"
  on_year_change="year_changed"
/>

LiveView event handlers

def handle_event("toggle_date", %{"date" => iso}, socket) do
  date = Date.from_iso8601!(iso)
  selected =
    if date in socket.assigns.selected_dates do
      List.delete(socket.assigns.selected_dates, date)
    else
      [date | socket.assigns.selected_dates]
    end
  {:noreply, assign(socket, selected_dates: selected)}
end

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

def handle_event("next_month", _params, socket) do
  {y, m} = next_ym(socket.assigns.year, socket.assigns.month)
  {:noreply, assign(socket, year: y, month: m)}
end

def handle_event("month_changed", %{"month" => m}, socket) do
  {:noreply, assign(socket, month: String.to_integer(m))}
end

def handle_event("year_changed", %{"year" => y}, socket) do
  {:noreply, assign(socket, year: String.to_integer(y))}
end

Zero JavaScript

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