Resource hierarchy

What you configure

parentId

Link a child resource to an existing parent using a cycle-free hierarchy.

resourcesInitiallyExpanded

Set the initial expansion state through resourceTimeline options.

resourceSummaryContent

Customize the text summary shown for a collapsed subtree.

Integration code example

1. Build and validate a resource tree with unique IDs and valid parent links.
2. Select a licensed resource view and choose the initial expansion state.
3. Use collapsed summaries to explain hidden scheduled load and capacity conflicts.

Copy this TypeScript into your application, not the browser console. Replace YOUR_WTS_LICENSE_KEY with an entitlement issued for your deployment origin. A WTS license is not a Google, Microsoft or CalDAV credential. These examples are documentation only and never execute on this page.

npm install @wts-calendar/core

<div id="calendar"></div>

@import '@wts-calendar/core/styles/calendar.css';

import { WtsCalendar, verifyCalendarLicense } from '@wts-calendar/core';
import { resourceSchedulingModule } from '@wts-calendar/core/resource-scheduling';

const license = await verifyCalendarLicense('YOUR_WTS_LICENSE_KEY');
const container = document.querySelector<HTMLElement>('#calendar');
if (!container) throw new Error('Calendar container not found');

const calendar = new WtsCalendar({
  container,
  license,
  plugins: [resourceSchedulingModule],
  viewDate: '2026-09-07',
  timeZone: 'UTC',
  startOfWeek: 1,
  height: 560,
  headerToolbar: { start: 'prev,next', center: 'title', end: '' },
  view: 'resource-timeline',
  resources: [
    { id: 'product', title: 'Product team' },
    { id: 'design', parentId: 'product', title: 'Design studio' },
    { id: 'engineering', parentId: 'product', title: 'Engineering' },
  ],
  events: [
    {
      id: 'review',
      title: 'Design review',
      resourceId: 'design',
      start: '2026-09-07T09:00:00Z',
      end: '2026-09-07T10:30:00Z',
    },
  ],
});
await calendar.whenIdle();

// Call from your component's unmount/destroy hook.
export function dispose() {
  calendar.destroy();
}

Application responsibilities

Mount after the host element exists. For Angular, React or Vue, pass these options and plugins to the web wrapper and use its calendar API for the calls below; let the wrapper own destruction.

Add the stylesheet once to your global CSS/SCSS file using a bundler that resolves npm package imports. Keep it separate from component TypeScript.

Behavior and lifecycle

• Expansion state survives date navigation and option rebuilds for the calendar instance.
• Collapsed summaries can report event count, booked units, capacity, utilization, and conflicts.