Resource CRUD & sources

What you configure

resources

Start with a static collection of stable resource IDs and titles.

resourceSources

Connect resource loaders or URLs and adapt your response shape.

source request data

Pass the range and pagination information required by your resource service.

Integration code example

1. Define stable resource identifiers shared by the resource directory and event assignments.
2. Choose static data, sources, or a combination and configure the relevant adapters.
3. Refresh source-owned data after accepted backend changes and expose loading or failure states to users.

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: [],
  events: [],
  resourceSources: [
    {
      id: 'directory',
      // Replace this in-memory directory with your own async loader.
      loader: async () => [
        { id: 'design', title: 'Design studio', capacity: 2 },
        { id: 'engineering', title: 'Engineering', capacity: 4 },
      ],
    },
  ],
});
await calendar.whenIdle();

calendar.addResource({ id: 'support', title: 'Support', capacity: 2 });
calendar.updateResource('support', { title: 'Support desk' });
calendar.removeResource('support'); // No events reference this sample resource.
export async function refreshDirectory() {
  await calendar.refetchResources('directory');
  return calendar.getResources();
}

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

Choose an explicit reassignment/removal policy before removing resources that have events. Source loaders and persistence belong to your application.

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

• Resource loading is separate from the event collection so each can follow its own data lifecycle.
• Paging allows a large directory to be supplied in smaller responses.