Calendar

New

A standalone calendar component powered by the cally web component. Renders an accessible, keyboard-navigable month view and integrates with Django forms via data-name. The cally.js script is already included in the base template.

API Reference

Attribute	Description	Type	Default
`value`	Pre-selected date in ISO format (`YYYY-MM-DD`)	string	`""`
`name`	Form field name written to `data-name` for downstream JS consumption	string	`""`
`min`	Minimum selectable date in ISO format	string	`""`
`max`	Maximum selectable date in ISO format	string	`""`
`disabled`	Disables all date interaction	boolean	`False`
`slot`	Optional content rendered inside `<calendar-date>` for custom day rendering	slot	—

Keyboard navigation: the cally web component implements full keyboard navigation — arrow keys move between days, Enter or Space selects a date, and Page Up / Page Down navigate between months.

Min / max constraints: set min and max to limit the selectable range and prevent invalid date selection at the component level before form submission.

Form integration: listen to the change event on the <calendar-date> element to capture the selected value and write it to a hidden input for form submission.

Examples

Usage


<c-calendar name="booking_date" />

Default Calendar

<c-calendar />

Pre-selected Date

<c-calendar value="2026-03-09" name="selected_date" />

Min / Max Constraints

<c-calendar min="2026-03-01" max="2026-03-31" />

Disabled

<c-calendar value="2026-03-09" disabled />

Form Integration

Selected:

<div x-data="{ selectedDate: '' }">
  <c-calendar
    name="appointment"
    @change.capture="selectedDate = $event.target.value"
  />
  <input type="hidden" name="appointment" :value="selectedDate" />
</div>