Capacity, skills & roles

What you configure

capacity / resourceUnits

Describe resource capacity and the units consumed by assigned events.

assignmentPolicy

Declare allowed event types, available skills, and roles.

resourceRequirements

Carry an event's type, skill, and role requirements with its assignment.

Integration code example

1. Agree on the capacity unit used by your resource and event data.
2. Describe resource capabilities and event requirements with consistent identifiers.
3. Enable the relevant constraint checks and surface structured failures in the editing experience.

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-time-grid-day',
  resources: [
    {
      id: 'design',
      title: 'Design studio',
      capacity: 2,
      assignmentPolicy: { skills: ['research'], roles: ['reviewer'] },
    },
  ],
  events: [],
});
await calendar.whenIdle();

calendar.addEvent({
  id: 'review',
  title: 'Research review',
  resourceId: 'design',
  resourceUnits: 1,
  resourceRequirements: { skills: ['research'], roles: ['reviewer'] },
  start: '2026-09-07T09:00:00Z',
  end: '2026-09-07T10:00:00Z',
});

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

Catch validation failures in your edit handler. Client-side resource policies do not replace authorization in a shared backend.

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

• Requirements are considered across resource-aware mutation and interaction paths.
• Resource summaries expose booked units and capacity conflicts for the visible range.