C&C Docs
Log in

cnc-calendar-availability

A month grid for picking days out of a schedule. It knows which days are available — a working week you define, minus any holidays — and refuses the rest. One date or many, the value is a comma-separated string, and a hidden input carries it into a form.

Quick start

Bind $value and give it a name. Weekends are non-working out of the box, so a plain calendar already refuses Saturday and Sunday.

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

Reading the grid

Cell Means Clicking it
Plain An available day in this month. Selects it, or deselects it if already selected.
Greyed Non-working: outside the working week, or a holiday. Nothing.
Italic, faded A day from the previous or next month, filling the week out. Navigates to that month rather than selecting the day.
Ringed Today. Selects it, if it is a working day.
Filled Selected. Deselects it.

The header's three buttons are previous month, jump to today's month, and next month.

Things to know

  • The value is a string, the event detail is an array. value is "2026-09-07,2026-09-08" while $event.detail.value is ["2026-09-07","2026-09-08"]. Split the one or join the other; do not assume they match.
  • There is no range mode and no min or max. Multi-select is a set of individual days, not a span, and nothing bounds how far forward or back the user can page. For a range, use cnc-calendar-compact.
  • Availability is not validated against the value. A value you set yourself is displayed as selected even if it lands on a holiday or a non-working weekday — the rules gate clicks, not the property.
  • Dates are local, not UTC. Every key is built from the viewer's local calendar fields, so the day a viewer clicks is the day they see regardless of timezone. Holiday dates are compared by calendar date too, so a bare YYYY-MM-DD is the right thing to write.

Usage guidance

Use this when some days are genuinely unavailable and the user needs to see which — booking a room, requesting leave, choosing delivery slots. When every day is pickable, the greying is noise: reach for cnc-calendar-compact for a plain date or range picker, or cnc-input type="date" for a single date in a form. It shows no events, so pair it with cnc-calendar or cnc-calendar-event when the user also needs to see what is already booked.

← Back to Widgets