CnObjectCalendar

Month calendar that plots objects by a date property (dateField), with optional day-spanning via endDateField. Navigating months emits range-change so the host can (re)fetch objects for the newly visible window — the component never fetches anything itself.

Try it

Loading CnObjectCalendar playground…

Props

OpenRegister reliance

none: this component does not touch OpenRegister, directly or through anything it imports. 0 direct references, 0 files reached through imports.

See the reliance overview for the filterable list.

Props

Name	Type	Required	Default	Description
objects	Array<object>		[]	Objects to plot. Expected to already be scoped to the visible range — e.g. the response of GET /api/views/{id}/calendar?start=&end=.
dateField	string	✓	—	The date property an object is plotted on.
endDateField	string		null	Optional end-date property — when set, an object spans dateField..endDateField.
visibleDate	union		null	Any day within the currently visible month (.sync-compatible). Defaults to today when omitted.
titleField	string		null	Object property used as a title fallback and as each object's identity.
rowKey	string		'id'	Object property used as each object's identity (for :key and click payload matching).
loading	boolean		false	Loading state (host is (re)fetching the visible range).
maxEventsPerDay	number		3	Maximum events shown per day cell before "+N" overflow.

Events

Name	Payload	Description
day-select	—	The "+N" button of a busy day was activated. Payload: the day as YYYY-MM-DD.
object-click	—	Emitted when a plotted object is clicked.
range-change	—	Emitted on mount and after every month navigation so the host can re-fetch objects for the new window.
update:visibleDate	—	Emitted on month navigation, for v-model:visible-date binding.

Slots

Name	Bindings	Description
day-event	object, day	day-event Override a single day's event entry.

Besides objects/dateField/endDateField/visibleDate above: titleField picks the object property shown as an event's label (falls back to title/name/the row key); rowKey is the object property used as each object's identity (defaults to id); maxEventsPerDay caps how many events a day cell shows before a "+N" overflow.

Fetching pattern

objects is expected to already be scoped to the visible range — typically the response of OpenRegister's GET /api/views/{id}/calendar?start=&end=. Wire range-change (fired on mount and after every month navigation) to a re-fetch:

<CnObjectCalendar
  :objects="objects"
  date-field="dueDate"
  end-date-field="endDate"
  v-model:visible-date="visibleDate"
  :loading="loading"
  @range-change="fetchCalendarObjects"
  @object-click="openObject" />

async fetchCalendarObjects({ rangeStart, rangeEnd }) {
  this.loading = true
  const { data } = await axios.get(url, { params: { start: rangeStart, end: rangeEnd } })
  this.objects = data.objects
  this.loading = false
},

The emitted rangeStart/rangeEnd cover the full displayed grid (the month padded to whole Sunday–Saturday weeks), matching the query parameters the OpenRegister calendar endpoint expects.

Keyboard and events

The month is an ARIA grid with a roving tab stop: arrow keys move between days (past the edge the month moves too), Home and End jump to the start and end of the week. Each entry is a button, and the "+N" overflow count is a button that emits day-select with the day as YYYY-MM-DD (CnIndexPage answers by showing the table filtered to that day).

Slots

• #day-event="{ object, day }" — override a single day's event entry (default renders the object's title).