C&C Docs
Log in

cnc-calendar-compact

A month grid narrow enough for a sidebar. It picks a single date or a range, marks busy days with a dot, and can list the month's events underneath. Every day is selectable — for a calendar that refuses some of them, use cnc-calendar-availability.

Quick start

Bind $value. Clicking a day selects it; clicking it again clears the selection.

October 2026
S
M
T
W
T
F
S
(empty) 
<div x-data="{ day: '' }">
  <cnc-calendar-compact name="compact-date" $value="day">
  </cnc-calendar-compact>
</div>

Things to know

  • The value is always a string; the event detail is not. value is "from,to" in range mode, but $event.detail.value is ["from","to"] — and a plain string, not a one-element array, in single mode.
  • Clicking a greyed day pages the month. The leading and trailing cells belong to the neighbouring months. Clicking one navigates there rather than selecting it, which is worth knowing before you conclude the click was ignored.
  • Only the visible month's events are listed. The card list is filtered to the month on screen, so paging empties it. Pass the whole dataset; the widget does the filtering.
  • Nothing bounds the selection. There is no min, no max, no disabled-days list and no limit on a range's length. Validate the value yourself, or use cnc-calendar-availability when whole days need to be refused.
  • Event cards are not sorted. time is free text and is never parsed, so cards appear in the order of the array you pass. Sort it before binding if chronological order matters.

Usage guidance

This is the calendar for a sidebar, a filter panel, or a booking form — anywhere the grid has to stay small and the answer is one date or one span. When the user needs to read a schedule rather than pick from it, use cnc-calendar for a month of events or cnc-calendar-event for a full agenda. For a single date inside an ordinary form, cnc-input type="date" is smaller still and brings its own validation.

← Back to Widgets