cnc-calendar-scroller

Quick start

Bind $value. Weekends are non-working by default, so they are greyed and refuse clicks.

<div x-data="{ day: '' }">
  <cnc-calendar-scroller name="scroll-date" $value="day">
  </cnc-calendar-scroller>
</div>

In a form

name renders a hidden input holding the value, so a surrounding form posts it — one field, comma-joined, even for a range.

<form method="post" action="/slots">
  <cnc-calendar-scroller name="slot_dates" range></cnc-calendar-scroller>
  <button type="submit">Reserve</button>
</form>

// posts slot_dates=2026-09-07,2026-09-11

Things to know

• A drag is a range gesture only. With range off there is no span to express, so dragging does nothing and the strip keeps click-to-pick.
• The header chevrons and the track arrows are different controls. The chevrons beside the title page the month; the arrows either side of the track scroll the strip inside the month it is showing. Both are arrows, so it is worth saying out loud.
• The track arrows scroll by one visible width. In a wide container the whole month may already fit, in which case they do nothing visible. That is not a fault — there is simply nothing to scroll.
• The value is a string, the event detail is not. value is "from,to"; $event.detail.value is ["from","to"], or a plain string in single mode.
• A pre-set value is not checked against availability. A value naming a holiday or a non-working weekday still renders as selected. The rules gate clicks, not the property.