Premium

Resource availability & assignment

Check whether a proposed assignment fits the resource's working intervals and blackout ranges. Built-in rules and an optional application approval hook explain why a selection or mutation is accepted or rejected.

Resource availability & assignment — Screenshot of the actual WTS Calendar package with sample data. Static image, not a live demo. Preview build: @wts-calendar/core@1.1.0 (unpublished).
Screenshot of the actual WTS Calendar package with sample data. Static image, not a live demo. Preview build: @wts-calendar/core@1.1.0 (unpublished).

What you configure

availability.workingHours
Define resource-specific working weekdays and time intervals.
availability.unavailable
Add exact unavailable ranges and optional reasons.
resourceAssignmentAllow
Run application approval after built-in synchronous checks pass.

Integration code example

  1. Define availability in the calendar's intended time zone.
  2. Attach resource requirements to events and enable the relevant selection or editing paths.
  3. Handle invalid, pending, and settled decisions; use transactional create/edit APIs for asynchronous approval.

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.

Install command
npm install @wts-calendar/core
Host markup
<div id="calendar"></div>
Global CSS / SCSS
@import '@wts-calendar/core/styles/calendar.css';
TypeScript integration
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',
  resources: [
    {
      id: 'design',
      title: 'Design studio',
      capacity: 2,
      availability: {
        workingHours: {
          daysOfWeek: [1, 2, 3, 4, 5],
          startTime: '09:00',
          endTime: '17:00',
        },
        unavailable: [
          { start: '2026-09-07T12:00:00Z', end: '2026-09-07T13:00:00Z', reason: 'Lunch' },
        ],
      },
    },
  ],
  events: [
    {
      id: 'review',
      title: 'Design review',
      resourceId: 'design',
      start: '2026-09-07T09:00:00Z',
      end: '2026-09-07T10:30:00Z',
    },
  ],
});
await calendar.whenIdle();

export function assignLunchBooking() {
  try {
    calendar.addEvent({
      id: 'lunch',
      title: 'Proposed booking',
      resourceId: 'design',
      start: '2026-09-07T12:00:00Z',
      end: '2026-09-07T12:30:00Z',
    });
  } catch (error) {
    // Display the validation error; do not silently discard the user's edit.
    return error instanceof Error ? error.message : String(error);
  }
  return 'Booking accepted';
}

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

  • Timed assignments must fit within one working interval; all-day assignments require an allowed weekday.
  • An unavailable-range intersection rejects the assignment, and asynchronous validation uses the pending/rollback lifecycle.

Limits and responsibilities

  • Client-side checks are not a reservation lock across simultaneous users.
  • An authoritative backend must revalidate availability before committing shared bookings.
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.