Resource view

A time grid with one column per resource, such as rooms or people, with the time outside each resource's availability shaded.

import { timeGridView } from '@calendar-tsx/core';

timeGridView({ days: 1, groupBy: 'resource' });

Day grids (dayGridView({ days: 1, groupBy: 'resource', maxEventsPerDay: 3 }), see grouping), lists (listView({ weeks: 1, groupBy: 'resource' }), see resource grouping) and timelines group by resource too.

Pass the resources to the calendar, in the order their columns should appear:

export const rooms: Calendar_Resource<Room>[] = [
  {
    id: 'room-a',
    title: 'Room A',
    availability: [{ start: at('2026-03-11T09:00'), end: at('2026-03-11T17:00') }],
    data: { capacity: 8 },
  },
  {
    id: 'room-b',
    title: 'Room B',
    availability: [],
    data: { capacity: 4 },
  },
];

An event appears in every column whose resource ID is in its resourceIds; events without resourceIds appear in no resource column. With more than one day, groupOrder: 'resource-first' (the default) keeps each resource's days together so all-day bars can span them, and 'date-first' groups by day and splits all-day bars per column.

Resources with parentId form a hierarchy of any depth. Parents appear before descendants; roots and siblings retain their input order. Children may precede their parents in the input. IDs must be unique; missing parents, self-parenting and cycles throw. Replace the resource array when changing the hierarchy.

Time grids, day grids and resource agendas use the full depth-first order. Agendas continue to omit empty groups. Timeline supports expanding and collapsing descendants. A parent is an ordinary resource with its own events and availability. Assignments, availability and backgrounds do not inherit through the hierarchy.

ModelCopy Anchor Link

Resource columns are time-grid columns with three more fields:

Read the model from calendar.store.state.layout after checking layout.kind. The quick start renders a month from it.