co-calendar
Pinta la cuadrícula de un mes y gestiona la selección de fecha, la navegación entre meses/años y el foco por teclado (patrón grid de WAI-ARIA, con hoy y seleccionado como estados visuales distintos). No incluye popover ni campo de texto: co-date-picker lo compone con co-date-field. El valor es una cadena YYYY-MM-DD; usa mode="range" con range-start/range-end para selección de rango.
Ver código
<co-calendar locale="es-CO" value="2026-06-15"></co-calendar>Props
| Prop | Atributo | Tipo | Default | Descripción |
|---|---|---|---|---|
disabledDates | disabled-dates | string | string[] | undefined | — | Blocked dates. Accepts a string[] or a JSON/comma string for raw-HTML use. |
disabledDaysOfWeek | disabled-days-of-week | number[] | string | undefined | — | Blocked weekdays (0=Sun..6=Sat). Accepts number[] or a JSON/comma string. |
firstDayOfWeek | first-day-of-week | number | 1 | First day of the week: 0=Sunday .. 6=Saturday. Default 1 (Monday). |
locale | locale | string | 'es-CO' | BCP-47 locale used for month/weekday labels. |
max | max | string | undefined | — | Latest selectable date, "YYYY-MM-DD". |
min | min | string | undefined | — | Earliest selectable date, "YYYY-MM-DD". |
mode | mode | "range" | "single" | 'single' | Selection mode. |
nextMonthLabel | next-month-label | string | undefined | — | Override the "next month" button aria-label (defaults from `locale`). |
prevMonthLabel | prev-month-label | string | undefined | — | Override the "previous month" button aria-label (defaults from `locale`). |
rangeEnd | range-end | null | string | undefined | — | Range end (range mode), "YYYY-MM-DD" or null. |
rangeStart | range-start | null | string | undefined | — | Range start (range mode), "YYYY-MM-DD" or null. |
value | value | null | string | undefined | — | Currently selected date (single mode), "YYYY-MM-DD" or null/empty. |
Eventos
| Evento | Detail | Bubbles | Cancelable | Descripción |
|---|---|---|---|---|
coRangeSelect | { start: string | null; end: string | null; } | ✓ | ✓ | Emitted on each range edit (range mode) with the draft endpoints. |
coSelect | string | ✓ | ✓ | Emitted when the user selects a day (single mode). Detail = "YYYY-MM-DD". |
Slots
Este componente no expone slots.
CSS Parts
| Part | Descripción |
|---|---|
::part(grid) | The day grid |
::part(header) | Month navigation header |
::part(root) | The calendar container |
CSS Custom Properties
Este componente no expone CSS custom properties.