Resource & non-resource timeline

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

// Optional: display the same dates without separate resource lanes.
export function showSingleLane() {
  calendar.setView('timeline');
}

// Call from your component's unmount/destroy hook.
export function dispose() {
  calendar.destroy();
}