YearViewModel

Built-in ViewModel subclass for the "year" view. Renders twelve mini-month sections with marked days for events. Pre-registered when the package loads.

PRO

The functionality is available in PRO Edition only

Usage

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

class CustomYearViewModel extends YearViewModel {
	// override points below
}

Override points

Method	Signature	Behavior in YearViewModel
getSections()	() => Section[]	Returns one section: { name: "year", mode: "year", xScale, yScale, size: 1 }
rangeStart(date)	(date: Date) => Date	Returns January 1 of the year containing date
addRange(date, n)	(date: Date, n: number) => Date	Returns January 1 of the year n years away
getRangeLabel()	() => string	Returns the four-digit year (e.g. "2025")
process(events)	(events: CalendarEvent[]) => SectionResult[]	Builds twelve YearMonthData entries with markedDays keyed by day number
configure(sections)	(sections: Record<string, any>) => void	Stores per-section overrides supplied via views[].sections; inherited from ViewModel

YearMonthData shape

Field	Type	Description
label	string	Month header label, formatted via yearMonthFormat
month	number	Zero-based month index (0-11)
year	number	Four-digit year
startOffset	number	Day-of-week offset of the 1st, aligned to weekStartDay
totalDays	number	Number of days in the month
today	number | undefined	Day number of today, or undefined if not in this month
markedDays	Record<number, CalendarEvent[]>	Events overlapping each day, keyed by day number

The result ui object also exposes columns: 3, weekStartDay, and months: YearMonthData[].

Registration

YearViewModel is registered globally on package load:

registerCalendarView("year", YearViewModel);

Calling registerCalendarView("year", CustomYearViewModel) again replaces the class for any future instantiation.

Example

Subclass to relabel month headers:

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

class CompactYearViewModel extends YearViewModel {
	getRangeLabel(): string {
		return `FY ${this.startDate.getFullYear()}`;
	}
}

registerCalendarView("year", CompactYearViewModel);

<Calendar :events="data" view="year" :views="['year', 'month']" />

Related articles

• registerCalendarView — register the subclass under a view id.
• tooltip — receives { events } for marked-day hover.
• views — expose the view in the toolbar switcher.
• Year view — what the default class renders.
• Custom views — full subclassing patterns.