WeekViewModel

ViewModel subclass that powers the built-in "week" view. It returns two sections - a multiday bar and a 7-day timeGrid - and aligns the visible range to weekStartDay. Subclass it to build workweek, two-week, or schedule-only variants while reusing the standard week layout.

Usage

import { WeekViewModel, registerCalendarView } from "@svar-ui/react-calendar";

class WorkWeek extends WeekViewModel {
	// override points
}

registerCalendarView("workweek", WorkWeek);

Override points

Same set as DayViewModel and MonthViewModel:

Method	Signature	Purpose
getSections	() => Section[]	Declare the layout sections (defaults to multiday + 7-day timeGrid).
rangeStart	(date: Date) => Date	Align an arbitrary date to the first day of the visible range.
addRange	(date: Date, n: number) => Date	Step n periods forward or back; defaults to n * 7 days.
getRangeLabel	() => string	Format the toolbar's date range label.
configure	(sections) => void	Apply section-level overrides supplied via views[].sections.

Common overrides:

• addRange for multi-week ranges (two-week, four-week).
• getSections for column count (workweek = 5 columns).
• getRangeLabel for custom range formatting.

Registration

Already registered as "week" when the package loads. To add a subclass under a new id:

import { WeekViewModel, registerCalendarView } from "@svar-ui/react-calendar";
import type { Section } from "@wx/calendar-store";

class WorkWeekViewModel extends WeekViewModel {
	getSections(): Section[] {
		const [multiday, timeGrid] = super.getSections();
		return [
			{ ...multiday, xScale: { ...multiday.xScale, length: 5 } },
			{ ...timeGrid, xScale: { ...timeGrid.xScale, length: 5 } },
		];
	}
}

registerCalendarView("workweek", WorkWeekViewModel);

<Calendar events={events} view="workweek" views={["workweek", "week", "month"]} />

Calling registerCalendarView again with an existing id ("week") replaces the implementation for every Calendar mount.

Related articles

• registerCalendarView — register the subclass under a view id.
• DayViewModel — sibling base for single-day variants.
• MonthViewModel — sibling for month-grid variants.
• Week view — what the default class renders.
• Custom views — full subclassing patterns.