Premium

Resource virtualization & print

Keep large scheduling surfaces practical by mounting the visible resource or date window with overscan. Print layouts provide a separate presentation path for reviewing schedules outside the interactive viewport.

What you configure

resourceTimeGrid: Tune the date-by-resource column threshold and overscan.
resourceTimeline: Configure independent resource and slot virtualization thresholds.
print styles: Check page orientation, repeated headings, and your application's print overrides.

Integration code example

Measure representative resource counts, date ranges, and event density.
Choose thresholds and overscan that balance smooth scrolling with DOM size.
Verify keyboard focus, mount/unmount cleanup, and print output with your real data.

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-timeline',
  resources: Array.from({ length: 300 }, (_, index) => ({
    id: 'resource-' + index,
    title: 'Resource ' + (index + 1),
  })),
  events: [
    {
      id: 'work',
      title: 'Scheduled work',
      resourceId: 'resource-0',
      start: '2026-09-07',
      end: '2026-09-10',
      isAllDay: true,
    },
  ],
  resourceTimeline: {
    durationDays: 30,
    slotWidth: 100,
    rowMinHeight: 42,
    resourceVirtualizationThreshold: 20,
    resourceOverscan: 2,
    slotVirtualizationThreshold: 15,
    slotOverscan: 2,
  },
});
await calendar.whenIdle();

// Invoke from your application's Print button. Browser print hooks expand the view.
export function printSchedule() {
  window.print();
}

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

Test paper size and pagination with your real dataset. Very large expanded print views use more memory than the virtualized screen.

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

Virtualization keeps headers, event geometry, selection state, and lifecycle hooks synchronized.
Scrolling changes mounted UI, not the underlying resource or event collection.

Limits and responsibilities

Virtualized off-screen elements should not be treated as a complete DOM export of the schedule.
Browser print results depend on data volume, page size, and host styles; validate the intended print workflow.

Premium

Enable this capability

Optional module: @wts-calendar/core/resource-scheduling
Signed entitlement: resource-scheduling

Request the required features and deployment origins by email. Pricing and terms are confirmed privately. A WTS license is separate from provider credentials; do not send passwords or production access tokens.

Email for a license key →

This public guide does not execute Premium modules or collect license tokens.