Calendar

Drop c-ui.calendar straight onto the page for an inline, block calendar. It ships its own surface (border, background, rounding), so it needs no wrapping card. Bind the selected value with x-model and listen for the change event. It is a fixed 280px by default; add full to stretch it to the container width.

<c-ui.calendar mode="single" />

{% cotton ui.calendar mode="single" /%}

Use mode to pick a single date, a range, or multiple dates.

<c-ui.calendar mode="single" />
<c-ui.calendar mode="range" />
<c-ui.calendar mode="multiple" />

{% cotton ui.calendar mode="single" /%}
{% cotton ui.calendar mode="range" /%}
{% cotton ui.calendar mode="multiple" /%}

Give the calendar a name and it submits with the form, writing a hidden input that holds the selected value formatted by value_format (default yyyy-MM-dd, formatted locally so the date never shifts a day through a UTC round-trip). This is the same serialization the Datepicker uses, so a bare calendar and a datepicker submit identically.

{# single / multiple: one name (multiple submits repeated values) #}
<c-ui.calendar mode="single" name="event_date" />

{# range: a start and end name #}
<c-ui.calendar mode="range" fromName="start" toName="end" />

{# custom submitted format #}
<c-ui.calendar name="event_date" value_format="dd/MM/yyyy" />

{# single / multiple: one name (multiple submits repeated values) #}
{% cotton ui.calendar mode="single" name="event_date" /%}

{# range: a start and end name #}
{% cotton ui.calendar mode="range" fromName="start" toName="end" /%}

{# custom submitted format #}
{% cotton ui.calendar name="event_date" value_format="dd/MM/yyyy" /%}

Constrain selectable dates with min_date / max_date (YYYY-MM-DD), disable weekdays with :disabled_days (0 = Sunday) or specific dates with :disabled_dates, and in range mode cap the span with :min / :max. These are the same limit props the Datepicker exposes; see its Limits section for live examples.

<c-ui.calendar
    mode="single"
    min_date="2026-09-01"
    max_date="2026-09-30"
    :disabled_days="[0, 6]"
    :disabled_dates="['2026-09-11', '2026-09-12']"
/>

{# range capped to 7 days #}
<c-ui.calendar mode="range" :max="7" />

{% cotton ui.calendar
    mode="single"
    min_date="2026-09-01"
    max_date="2026-09-30"
    :disabled_days="[0, 6]"
    :disabled_dates="['2026-09-11', '2026-09-12']"
/%}

{# range capped to 7 days #}
{% cotton ui.calendar mode="range" :max="7" /%}

The Datepicker is this calendar plus a text trigger: it shows a button, opens the calendar in a popover, positions and focus-traps it, and formats the chosen value for display. Reach for:

• Calendar when you want the grid always visible inline (scheduling panels, booking widgets, dashboards).
• Datepicker when space is tight and a compact field that opens on demand fits better.

Both share the same selection modes, limits and form serialization, so you can switch between them without changing how the value is submitted.

Props