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

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
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.

Slots

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