Skip to main content

DayViewModel

ViewModel subclass that backs the built-in "day" view. Subclass it to alter the day view's sections, range alignment, or label, then register the result under a custom view id.

Usage​

class DayViewModel extends ViewModel {
	getSections(): Section[];
	rangeStart(date: Date): Date;
	addRange(date: Date, n: number): Date;
	getRangeLabel(): string;
}

Default behavior:

  • getSections() returns two sections: a multiday bar at the top (mode "bars", holds events that span more than one day) and a timeGrid (mode "boxes", hours 8-18, 60-minute step, 15-minute snap).
  • rangeStart(date) returns the same date with hours zeroed.
  • addRange(date, n) steps by n days.
  • getRangeLabel() returns the start date formatted via fmt("titleDayFormat").

Override points​

Override the methods inherited from ViewModel to customize the day view:

MethodOverride to
getSections()Change the section list, scale ranges, modes, or default UI flags
rangeStart()Align the visible day differently (e.g. shift to a fiscal day)
addRange()Change the navigation step size
getRangeLabel()Replace the toolbar range label

The base ViewModel already implements setRange(), process(), toPositionStart(), and toPositionEnd() - overriding those is rarely needed.

Registration​

Register the subclass under a view id, then list that id in views:

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

class BusinessDayViewModel extends DayViewModel {
	getSections() {
		const sections = super.getSections();
		const grid = sections.find(s => s.name === "timeGrid")!;
		grid.yScale = { ...grid.yScale, startHour: 9, endHour: 17 };
		return sections;
	}
}

registerCalendarView("business-day", BusinessDayViewModel);
<Calendar
  events={events}
  date={date}
  view="business-day"
  views={["business-day", "week", "month"]}
/>

registerCalendarView(id, ViewModelClass) writes to a global registry, so call it once at module load.