Premium

Dates above resources

Choose which question the header answers first: when work happens, or who is assigned. Vertical resource DayGrid and TimeGrid views support both date-major and resource-major arrangements.

Loading interactive demo…

What you configure

datesAboveResources: Set true for date-major headings; false is resource-major.
vertical resource views: Use resource DayGrid or resource TimeGrid day/week variants.
visible range: Keep the date range and resource collection consistent while comparing arrangements.

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-time-grid-week',
  datesAboveResources: true,
  resourceTimeGrid: { columnWidth: 180 },
  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 function groupByResource() {
  calendar.setOptions({ datesAboveResources: false });
}

Behavior and lifecycle

Date-major headers repeat resources under each date.
Resource-major headers repeat dates under each resource without changing underlying event assignments.

Limits and responsibilities

This option changes heading and column organization, not the event data model.
It is not a setting for the ordinary Month view or horizontal timeline.

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.