Resource DayGrid

What you configure

view

Choose resource-day-grid-day or resource-day-grid-week.

datesAboveResources

Choose date-first or resource-first column headings.

resources / events

Provide resources and event assignments with matching resource IDs.

Integration code example

1. Register the resource scheduling module with a verified resource-scheduling license.
2. Choose the day or week range and the heading arrangement that suits the number of resources.
3. Populate event assignments and connect date or event interactions to your application.

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-day-grid-day',
  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.

Switch to resource-day-grid-week with calendar.setView() when a week range is needed.

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 and date headings identify the ownership of each visible cell.
• Timed events remain represented even though the view has no hourly grid.