TimelineViewModel

The ViewModel subclass behind the built-in "timeline" view (PRO). Pre-registered under the id "timeline". Subclass it to build Gantt-style or per-resource variants - change the row source, the time bounds, or the range step.

The functionality is available in PRO Edition only

PRO

Usage

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

class MyTimeline extends TimelineViewModel {
	// override points
}

Override points

Method	Signature	Behavior
getSections()	() => Section[]	Returns one section: { name: "timeGrid", mode: "bars", xScale: time, yScale: unit, size: 1 }.
rangeStart(date)	(date: Date) => Date	Returns the input date with the time-of-day cleared to 00:00.
addRange(date, n)	(date: Date, n: number) => Date	Returns date + n days.
getRangeLabel()	() => string	Day label via fmt("titleDayFormat").
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. The render = "scrollable" class field selects the horizontally scrollable renderer - keep it set in subclasses.

The default yScale ships with one placeholder unit ({ id: "default", label: "Default" }) and an accessor: "unit_id". Override items and accessor via configure() (or views[].sections) to bind to a real resource list.

Registration

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

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

class WeekTimeline extends TimelineViewModel {
	addRange(date: Date, n: number): Date {
		const d = new Date(date);
		d.setDate(d.getDate() + n * 7);
		return d;
	}

	getRangeLabel(): string {
		return this.fmt("titleWeekFormatStart")(this.startDate);
	}
}

registerCalendarView("week-timeline", WeekTimeline);

<Calendar
  events={events}
  view="week-timeline"
  views={[
    {
      id: "week-timeline",
      label: "Week timeline",
      sections: {
        timeGrid: {
          yScale: {
            items: [
              { id: "room-a", label: "Room A" },
              { id: "room-b", label: "Room B" },
            ],
            accessor: "unit_id",
          },
        },
      },
    },
  ]}
/>

Related articles

• ResourcesViewModel — column-oriented sibling for the same accessor model.
• registerCalendarView — register the subclass under a view id.
• views — expose the view in the toolbar switcher.
• Timeline view — what the default class renders.
• Custom views — full subclassing patterns.