co-event-calendar

This content is not available in your language yet.

Muestra los eventos del mes con una barra de herramientas (hoy / anterior / siguiente / cambio de vista) y delega el pintado en la vista activa (fase 1: month). Los eventos son CONTROLADOS: el componente emite solicitudes (coEventDrop, coDateSelect) y el host las aplica actualizando la propiedad events (dejarla igual ante un fallo es el revert). Los instantes son ISO-8601 con offset/Z (con hora) o YYYY-MM-DD (todo el día); time-zone controla el render en hora de pared. La propiedad events acepta un array o una cadena JSON.

Demo

Ver código

<co-event-calendar date="2026-07-15" locale="es-CO" time-zone="America/Bogota" events='[{"id":"1","title":"Demo cliente","start":"2026-07-15T16:00:00Z","end":"2026-07-15T17:00:00Z"},{"id":"2","title":"Viaje Bogotá","start":"2026-07-20","end":"2026-07-23","allDay":true}]'></co-event-calendar>

API

Props

Prop	Atributo	Tipo	Default	Descripción
`availableViews`	`available-views`	`string \| string[]`	`['month']`	Views offered in the switcher. Defaults to the implemented set.
`date`	`date`	`string \| undefined`	`—`	Anchor date "YYYY-MM-DD" controlling the visible period. Persisted by host.
`dayMaxEvents`	`day-max-events`	`number`	`3`	Max event lanes per day before "+N more".
`defaultDurationMinutes`	`default-duration-minutes`	`number`	`60`	Default minutes for a timed event missing an end.
`editable`	`editable`	`boolean`	`true`	Master interaction gate (per-event `editable` can still lock individuals).
`events`	`events`	`CoCalendarEvent[] \| string`	`[]`	Events: an array or a JSON string (raw-HTML use).
`firstDayOfWeek`	`first-day-of-week`	`number`	`1`	First day of week, 0=Sun..6=Sat.
`locale`	`locale`	`string`	`'es-CO'`	BCP-47 locale for labels.
`maxDate`	`max-date`	`string \| undefined`	`—`	Latest interactable day "YYYY-MM-DD".
`minDate`	`min-date`	`string \| undefined`	`—`	Earliest interactable day "YYYY-MM-DD" (past-block).
`selectable`	`selectable`	`boolean`	`true`	Allow empty-day selection to request a create.
`statusColors`	`status-colors`	`string \| undefined \| { backgroundColor?: string \| undefined; borderColor?: string \| undefined; }`	`—`	Optional status→{backgroundColor,borderColor} map (object or JSON string).
`timeZone`	`time-zone`	`string \| undefined`	`—`	IANA timezone for wall-clock rendering. Defaults to the browser zone.
`view`	`view`	`"agenda" \| "day" \| "month" \| "week"`	`'month'`	Active view. Phase 1 ships `month`; week/day/agenda land in later phases.

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
`coDateSelect`	`{ start: string; end: string; allDay: boolean; }`	—	✓	A date/range was selected (create request).
`coDatesSet`	`{ view: string; start: string; end: string; activeDate: string; }`	—	✓	The visible period changed → host should refetch and persist the view pref.
`coEventClick`	`{ event: NormalizedEvent; }`	—	✓	An event chip was activated.
`coEventDrop`	`{ event: NormalizedEvent; start: string; end: string; oldStart: string; oldEnd: string; allDay: boolean; revert: () => void; }`	—	✓	An event was dragged to a new time (move). `revert` is a host convenience.
`coMoreClick`	`{ date: string; events: NormalizedEvent[]; }`	—	✓	"+N more" was activated for a day.
`coViewChange`	`{ view: string; }`	—	✓	The active view changed.

Slots

Este componente no expone slots.

CSS Parts

Part	Descripción
`::part(body)`	The active view container
`::part(toolbar)`	The header toolbar

CSS Custom Properties

Este componente no expone CSS custom properties.