Utilization & capacity heatmaps

What you configure

resources / events / profiles

Supply capacity, assignments, and resource planning policies.

createCapacityHeatmap

Request a bounded start/end interval and bucketMinutes resolution.

bucket states

Interpret unconfigured, closed, idle, balanced, high, and over states.

Integration code example

1. Create the licensed advanced resource planner with your time zone and current data.
2. Request heatmap buckets for the range and resolution your users need.
3. Render bucket values with accessible labels and a legend, then refresh planner data after changes.

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

import { verifyCalendarLicense } from '@wts-calendar/core';
import { AdvancedResourcePlanner } from '@wts-calendar/core/advanced-resource-planning';

const license = await verifyCalendarLicense('YOUR_WTS_LICENSE_KEY');
const planner = new AdvancedResourcePlanner({
  license,
  timeZone: 'UTC',
  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',
    },
  ],
});

export const heatmap = planner.createCapacityHeatmap({
  start: '2026-09-07T08:00:00Z',
  end: '2026-09-07T18:00:00Z',
  bucketMinutes: 60,
});
console.table(
  heatmap.cells.map((cell) => ({
    resource: cell.resourceId,
    start: cell.start,
    booked: cell.bookedUnits,
    capacity: cell.usableCapacity,
    utilization: cell.utilizationPercent,
    state: cell.state,
  })),
);

Application responsibilities

The engine returns data, not a built-in chart. Render results in your application and call planner.setData() after resources, events or profiles change.

Behavior and lifecycle

• Results include configured and policy-adjusted capacity together with active shift IDs.
• Planner inputs are copied and returned results are immutable.