Resource TimeGrid
Schedule appointments on an hourly grid with a separate column for each resource. Day and week variants keep resource headings, all-day events, timed slots, and interactive selection aligned.
Loading interactive demo…
What you configure
- view
- Choose resource-time-grid-day or resource-time-grid-week.
- dayView / weekView
- Configure hour segments, segment height, and interaction tolerances.
- resourceTimeGrid
- Set columnWidth, virtualizationThreshold, and overscan for large schedules.
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-day',
slotMinTime: '08:00',
slotMaxTime: '18:00',
resourceTimeGrid: { columnWidth: 240 },
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',
},
],
});Behavior and lifecycle
- Moving a timed event to another column updates its resource assignment and preserves duration.
- Large date-by-resource column sets can virtualize while keeping headers and event hooks synchronized.
Limits and responsibilities
- Columns scroll horizontally when their configured widths exceed the available space.
- Persist successful edits and validate authoritative availability in your own application.
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.