Navigation

Calendar

A month with range selection: click the start, hover to preview the range and click the end.

data-u="calendar"

Example

<article class="u-card u-wall" data-wall="calendar">
  <div class="u-panel"><div data-u="calendar" data-u-props='{"year": 2026, "month": 6, "start": [2026, 6, 7], "end": [2026, 6, 14]}'></div></div>
</article>

Installation

Calendar ships in the full package, in unslop.css and unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

A ready-made block that uses calendar:

curl -fsSL unslop.leallabs.dev/i | sh -s add wall-calendar

No build Name-based add is for charts and blocks. Components with JS live in unslop.js, which mounts every data-u on the page by itself.

Props

They go in data-u-props, as JSON.

Prop	Type	Default	What it does
`year`	number	2026	Year it opens on.
`month`	number	6	Month it opens on, counting from 0 (0 is January, 6 is July).
`start`	`[year, month, day]`	`[2026, 6, 7]`	Range start. Month also counts from 0.
`end`	`[year, month, day]`	`[2026, 6, 14]`	Range end.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
grid	`role="grid"`, `role="columnheader"`, `role="gridcell"`	Days are buttons inside the grid.
range end days	`aria-selected="true"`	Start and end of the range.
month title	`aria-live="polite"`	Announces the month when it changes.
month arrows	`aria-label`	`"Previous month"` and `"Next month"`.

Keyboard

Key	Does
Tab	moves through days and buttons
Enter or Space	picks the day

Events and API

Event	detail	When
`u:apply`	`{ start: Date, end: Date }`	When Apply is clicked with a range selected.

Every event bubbles up the page. Listen on the element itself: el.addEventListener("u:apply", (e) => e.detail).