Resource TimeGrid

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.

Integration code example

1. Load the licensed resource scheduling module and at least one resource or resource source.
2. Configure slotMinTime, slotMaxTime, timeZone, and the day/week range.
3. Enable the needed interactions and handle event-drop, event-resize, and resource-aware selection results.

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',
  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',
    },
  ],
});
await calendar.whenIdle();

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

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

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