Skip to main content

registerCalendarView

Adds a ViewModel subclass to the global view registry under the given id. Built-in views (day, week, month, agenda, year, resources, timeline) are registered automatically when the package loads.

Calling the function again with the same id replaces the previous class for any new Calendar instance.

Signature​

registerCalendarView(
    id: string,
    viewClass: new () => ViewModel
): void;
ParameterTypeDescription
idstringRegistry key referenced from the views prop.
viewClassnew () => ViewModelConstructor of a class extending ViewModel.

Returns: void.

Registering a custom subclass​

import { registerCalendarView, WeekViewModel } from "@wx/vue-calendar";

class WorkWeekViewModel extends WeekViewModel {
	addRange(date: Date, n: number): Date {
		const d = new Date(date);
		d.setDate(d.getDate() + n * 7);
		return d;
	}
	// override getSections / rangeStart / getRangeLabel as needed
}

registerCalendarView("workweek", WorkWeekViewModel);
<Calendar :events="events" view="workweek" :views="['workweek', 'week', 'month']" />

Overriding a built-in id​

Re-registering an existing id replaces the built-in class globally. Subsequent Calendar instances pick up the new implementation; already-mounted instances keep the previous one.

import { registerCalendarView, MonthViewModel } from "@wx/vue-calendar";

class CompactMonth extends MonthViewModel {
	// ...
}

registerCalendarView("month", CompactMonth);
  • views — the prop that lists registered ids.
  • view — pick the active view at mount.
  • DayViewModel — base class for day-shaped views.
  • WeekViewModel — base class for week-shaped views.
  • Custom views — full subclassing patterns.