Premium

Resource columns & render hooks

Add meaningful resource metadata and tailor the scheduling surface with documented rendering hooks. Resizable columns and balanced mount/unmount callbacks let the calendar fit your application's design and lifecycle.

Loading interactive demo…

What you configure

resourceAreaColumns: Describe title, capacity, extended properties, or derived text values.
columnResizing: Configure resizing limits and keyboard steps, or disable handles.
content and lifecycle hooks: Customize resource cells, lanes, groups, and headers with their typed context.

Essential integration

This assumes the shared Quick start already provides premiumLicense and, for UI views, premiumCalendarOptions. Only the feature-specific setup is shown.

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

const calendar = new WtsCalendar({
  ...premiumCalendarOptions,
  plugins: [resourceSchedulingModule],
  view: 'resource-timeline',
  resourceTimeline: {
    durationDays: 7,
    resourceAreaColumns: [
      { field: 'title', header: 'Team', width: 180 },
      { field: 'capacity', header: 'Capacity', width: 90 },
    ],
  },
  // Returning text avoids injecting untrusted HTML.
  resourceCellContent: ({ resource, field }) =>
    field === 'title' && resource ? resource.title + ' · team' : undefined,
  resourceCellDidMount: ({ el }) => {
    el.dataset['integration'] = 'resource-label';
  },
  resourceCellWillUnmount: ({ el }) => {
    delete el.dataset['integration'];
  },
  resources: [
    { id: 'design', title: 'Design studio', capacity: 2 },
    { id: 'engineering', title: 'Engineering', capacity: 4 },
  ],
  events: [
    {
      id: 'review',
      title: 'Design review',
      resourceId: 'design',
      start: '2026-09-07T09:00:00Z',
      end: '2026-09-07T10:30:00Z',
    },
  ],
});

Behavior and lifecycle

Column resizing keeps the relevant shared scheduling scale aligned and emits a column-resize result.
Render hooks remain balanced across virtual-window recycling, filtering, navigation, and destruction.

Limits and responsibilities

Ordinary column values are assigned as text, not interpreted as HTML.
Widths persist for the calendar instance; save preferences yourself if they must survive reloads.

Premium

Enable this capability

Optional module: @wts-calendar/core/resource-scheduling
Local capability ID: resource-scheduling · enabled by package-wide Premium

Use the request form to describe your project and deployment origins. Pricing and terms are confirmed privately. A WTS license is separate from provider credentials; do not send passwords or production access tokens.

The live example uses a browser-visible deployment key restricted to this package and approved origins. It does not collect license keys or visitor credentials.