Premium

Resource grid

Place people, rooms, or equipment beside a date grid so assignments can be understood in context. Each lane belongs to a stable resource record, and event assignments remain part of your application's data.

Loading interactive demo…

What you configure

view: Select the resource view for an all-day resource grid.
resources / resourceSources: Supply uniquely identified resource records directly or through a source.
resourceId: Associate each assigned event with its resource's ID.

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',
  resources: [
    { id: 'design', title: 'Design studio', capacity: 2 },
    { id: 'engineering', title: 'Engineering', capacity: 4 },
  ],
  events: [
    {
      id: 'offsite',
      title: 'Team offsite',
      resourceId: 'design',
      start: '2026-09-07',
      end: '2026-09-09',
      isAllDay: true,
    },
  ],
});

Behavior and lifecycle

Resource rows and date columns make assignment and multi-day event spans visible together.
Resource hierarchy, availability rules, and column customization can be combined with the grid.

Limits and responsibilities

The grid renders supplied assignments; it is not an automatic scheduling optimizer.
Local edits are not durable until your application saves them.

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.