Premium

Resource grouping, ordering & filtering

Create a useful presentation of a large resource directory without rewriting its source collection. Combine filters, stable ordering, nested groups, and parent-child hierarchy to match the way teams plan work.

What you configure

resourceFilter / filterResourcesWithEvents: Filter by application criteria or the presence of assigned events.
resourceOrder: Order using fields, descending field entries, comparator functions, or mixed arrays.
resourceGroupFields: Define nested timeline groups with values, labels, empty labels, and ordering.

Integration code example

Choose the resource fields that users need to filter and compare.
Add ordering and timeline group tiers, optionally including grouped resource-area columns.
Check empty values and descendant matches using representative resource trees.

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',
  resourceGroupFields: [{ field: 'region', label: 'Region' }],
  resourceOrder: '-capacity,title',
  resourceFilter: ({ resource }) => !resource.extendedProps?.['archived'],
  resources: [
    { id: 'design', title: 'Design', capacity: 2, extendedProps: { region: 'East' } },
    {
      id: 'engineering',
      title: 'Engineering',
      capacity: 4,
      extendedProps: { region: 'West' },
    },
    {
      id: 'retired',
      title: 'Archived',
      extendedProps: { region: 'East', archived: true },
    },
  ],
  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

Matching descendants retain their ancestors so filtering does not create an invalid resource tree.
Column groups, global group tiers, and parentId hierarchy can compose without mutating the source array.

Limits and responsibilities

Nested resource grouping is a Resource Timeline presentation feature.
A visibility filter is not authorization; sensitive records should be excluded by your data-access layer.

Premium

Enable this capability

Optional module: @wts-calendar/core/resource-scheduling
Signed entitlement: resource-scheduling

Request the required features and deployment origins by email. Pricing and terms are confirmed privately. A WTS license is separate from provider credentials; do not send passwords or production access tokens.

Email for a license key →

This public guide does not execute Premium modules or collect license tokens.