AgendaViewModel

The ViewModel subclass behind the built-in "agenda" view (PRO). Pre-registered under the id "agenda". Subclass it to derive list-style views (e.g. "next 14 days", "by category") that reuse the agenda layout.

The functionality is available in PRO Edition only

PRO

Usage

import { AgendaViewModel } from "@svar-ui/react-calendar";

class MyAgenda extends AgendaViewModel {
	// override points
}

Override points

Method	Signature	Behavior
getSections()	() => Section[]	Returns one section: { name: "agenda", mode: "list", size: 1 }.
rangeStart(date)	(date: Date) => Date	Returns the first day of the month at 00:00.
addRange(date, n)	(date: Date, n: number) => Date	Returns date + n months, anchored to day 1.
getRangeLabel()	() => string	Formatted month label via fmt("titleMonthFormat").
process(events)	(events: CalendarEvent[]) => SectionResult[]	Full override of the pipeline - filters events to the month range and sorts by start then end time.
configure(sections)	(sections: Record<string, any>) => void	Deep-merges views[].sections overrides into the section definitions.

Inside the subclass this.startDate, this.endDate, and this.fmt(pattern) are available.

Registration

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

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

class FortnightAgenda extends AgendaViewModel {
	rangeStart(date: Date): Date {
		const d = new Date(date);
		d.setHours(0, 0, 0, 0);
		return d;
	}

	addRange(date: Date, n: number): Date {
		const d = new Date(date);
		d.setDate(d.getDate() + n * 14);
		return d;
	}
}

registerCalendarView("fortnight", FortnightAgenda);

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

Related articles

• registerCalendarView — register the subclass under a view id.
• views — expose the view in the toolbar switcher.
• Agenda view — what the default class renders.
• Custom views — full subclassing patterns.