LanternUI.Components.Calendar (LanternUI v0.8.2)

Copy Markdown View Source

A month-grid calendar primitive — the pane the date pickers compose.

<.calendar id="cal" selected={~D[2026-02-03]} />
<.calendar id="cal" month={~D[2026-02-01]} week_start={1} min="2026-01-01" />

Server-renders the full initial grid (6 rows × 7 days, WAI-ARIA grid roles); the LanternCalendar JS hook takes over month navigation and keyboard interaction client-side (no LiveView round-trips — works in dead views and embedded hosts). Selecting a day writes the ISO date to the element's data-value and emits a lantern:change CustomEvent; pickers listen to that.

States: selected day = monochrome-primary fill, today = coral ring, adjacent-month days dimmed, out-of-min/max days disabled.

Summary

Functions

calendar(assigns)

Functions

calendar(assigns)

Attributes

  • id (:string) (required) - Stable DOM id (state is persisted per id).
  • month (Date) - month to display; defaults to selected || today. Defaults to nil.
  • selected (Date) - Currently selected date; highlighted in the grid. Defaults to nil.
  • week_start (:integer) - First weekday column; 0 is Sunday, 1 is Monday. Defaults to 0. Must be one of 0, 1, 2, 3, 4, 5, or 6.
  • min (:string) - ISO date; earlier days are disabled. Defaults to nil.
  • max (:string) - ISO date; later days are disabled. Defaults to nil.
  • class (:any) - Extra classes merged onto the root element. Defaults to nil.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.