ResourcesViewModel

The ViewModel subclass behind the built-in "resources" view (PRO). Pre-registered under the id "resources". Lays out resources as columns (xScale) and time as rows (yScale) for a single day. Subclass to override columns, time bounds, or sections.

PRO

The functionality is available in PRO Edition only

Usage

import { ResourcesViewModel } from "@svar-ui/vue-calendar";

class MyResources extends ResourcesViewModel {
	// override points
}

Override points

Method	Signature	Behavior
getSections()	() => Section[]	Returns one boxes section: xScale is a unit scale (resource columns, accessor "unit_id"), yScale is a time scale 8-18, step 60.
rangeStart(date)	(date: Date) => Date	Returns the same day at 00:00.
addRange(date, n)	(date: Date, n: number) => Date	Returns date + n days.
getRangeLabel()	() => string	Day label via fmt("titleDayFormat").
configure(sections)	(sections: Record<string, any>) => void	Deep-merges views[].sections overrides into the section definitions.

Sets render = "scrollable", so the section is rendered by the scrollable section layout.

Inside the subclass this.startDate, this.endDate, and this.fmt(pattern) are available. Protected pipeline hooks mapToPrimitive, sortBeforeLayout, and findUnitIndex are inherited from ViewModel.

Default xScale.items is a single placeholder column ({ id: "default", label: "Default" }). Override via views[].sections.timeGrid.xScale.items. Bind events to columns through the field named by xScale.accessor (default: unit_id).

Registration

ResourcesViewModel is pre-registered as "resources" when the package loads. Register a subclass under a new id with registerCalendarView:

import {
	ResourcesViewModel,
	registerCalendarView,
} from "@svar-ui/vue-calendar";

class RoomsView extends ResourcesViewModel {
	getSections() {
		const sections = super.getSections();
		sections[0].xScale.items = [
			{ id: "room-a", label: "Room A" },
			{ id: "room-b", label: "Room B" },
			{ id: "room-c", label: "Room C" },
		];
		sections[0].xScale.accessor = "roomId";
		return sections;
	}
}

registerCalendarView("rooms", RoomsView);

<Calendar :events="events" view="rooms" :views="['rooms', 'week']" />

Related articles

• TimelineViewModel — row-oriented sibling for the same accessor model.
• registerCalendarView — register the subclass under a view id.
• views — expose the view in the toolbar switcher.
• Resources view — what the default class renders.
• Custom views — full subclassing patterns.