Skip to main content

MonthViewModel

View-model class that powers the built-in "month" view. Renders a 7-column grid of weeks with multi-day event bars snapped to day cells. Subclass it to customize month rendering (week-number column, fixed row count, alternative cell flags) and re-register the subclass under a new id.

Usage​

class MonthViewModel extends ViewModel {
	snapToCell: boolean;

	getSections(): Section[];
	rangeStart(date: Date): Date;
	addRange(date: Date, n: number): Date;
	setRange(date: Date): [Date, Date];
	getRangeLabel(): string;
	configure(sections: Record<string, any>): void;
}
MemberTypeDescription
snapToCellbooleanWhen true, multi-day events also snap to full day cells. Default: false.
weekStartDaynumberInherited from ViewModel; 0-6, default 1 (Monday).
getSections() => Section[]Returns one grid section with a 7-day x-scale and a 5-6 week y-scale.
rangeStart(date) => DateFirst day of the grid: 1st of the month, then back to that week's weekStartDay.
addRange(date, n) => DateReturns the 1st of the target month (n months ahead/back); grid alignment happens in setRange.
setRange(date) => [Date, Date]Computes endDate as startDate + weekCount * 7, where weekCount is 5 or 6.
getRangeLabel() => stringReturns the month label (e.g. "March 2025") via fmt("titleMonthFormat").
configure(sections) => voidStores per-section overrides supplied via views[].sections; merged into the result of getSections.

Override points (protected) inherited from ViewModel and used by MonthViewModel:

  • mapToPrimitive - flags primitives with isMultiDay and snaps single-day events to day cells.
  • sortBeforeLayout - sorts multi-day events before single-day events at the same x position.
  • buildCells - emits a GridCell[] with date, day, inMonth, today, weekend, plus position fields.

Registration​

MonthViewModel is pre-registered as "month" when the package loads. Register a subclass under a different id with registerCalendarView.

Example​

import { MonthViewModel, registerCalendarView } from "@svar-ui/svelte-calendar";

class CompactMonthViewModel extends MonthViewModel {
	snapToCell = true;
}

registerCalendarView("compact-month", CompactMonthViewModel);
<Calendar
    {events}
    views={["day", "week", "compact-month"]}
    view="compact-month"
    date={new Date()}
/>