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.

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.

Integration code example

Choose metadata columns and set useful width bounds.
Use text values by default; only trusted application hooks should construct DOM content.
Release observers and custom resources when their matching unmount hook runs.

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',
  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',
    },
  ],
});
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.

If a mount hook creates a tooltip or subscription, dispose it in the corresponding unmount hook.

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

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
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.