Examples
Basic
Fully interactive, mirroring PF React: the arrows, month menu, and year input navigate (server-rendered HTMX swaps), clicking a date selects it and jumps to its month, and arrow keys move the focus through the grid. Starts on May 2026 with the 20th selected; the real current day gets its ring when you navigate to today's month.
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
Date range
The PF range-selection behavior: dates before the fixed range start (the 12th) are disabled, clicking a date commits it as the new range end, and hovering past the end previews extending the band — across month boundaries too. Navigation keeps the committed range.
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
Documentation
Calendar month props
Parameters accepted by
{#include components/forms/calendar-month ... /}. Model mode: pass
calendarMonth=<CalendarMonth> built in Java — it computes the grid from a
YearMonth and, given an hxUrl endpoint, wires all
navigation (prev/next, month menu, year input, date selection) as server-rendered HTMX swaps plus the range hover
preview. The flat parameters below render a static, non-navigable calendar.
| Name | Type | Description |
|---|---|---|
* id
|
String | DOM id. |
* month /
year
|
String / Integer | Visible month name and year. |
* weeks
|
List<List<Day>> |
Each day map:
{date, adjacent?, current?, selected?, disabled?, startRange?, endRange?, inRange?}. Build in Java and pass via .data("weeks", ...).
|
Usage
Build the grid on the server. A Java helper that takes a YearMonth + selected date and returns
List<List<Map>> keeps the template trivial.