Resource & non-resource timeline
Lay out longer schedules on a horizontal date scale. Use resource-timeline to assign a row to each resource, or timeline to place ordinary events in overlapping lanes without inventing resource records.
Loading interactive demo…
What you configure
- view
- Select resource-timeline or timeline.
- resourceTimeline
- Configure durationDays, slotWidth, rowMinHeight, and resourceAreaWidth.
- virtualization thresholds
- Tune resource-row and date-slot windows independently 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-timeline',
resourceTimeline: { durationDays: 7, slotWidth: 120, rowMinHeight: 56 },
resources: [
{ id: 'design', title: 'Design studio', capacity: 2 },
{ id: 'engineering', title: 'Engineering', capacity: 4 },
],
events: [
{
id: 'delivery',
title: 'Delivery',
resourceId: 'engineering',
start: '2026-09-07',
end: '2026-09-10',
isAllDay: true,
},
],
});
// Optional: display the same dates without separate resource lanes.
export function showSingleLane() {
calendar.setView('timeline');
}Behavior and lifecycle
- Overlapping events occupy deterministic lanes; background events and range shading remain available.
- Pointer, touch, and keyboard interactions share validation and rollback behavior.
Limits and responsibilities
- Timeline visualization does not calculate a critical path by itself; that analysis belongs to advanced resource planning.
- The non-resource view does not add synthetic resource IDs to event callbacks.
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.