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.

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
- Define availability in the calendar's intended time zone.
- Attach resource requirements to events and enable the relevant selection or editing paths.
- 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.
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-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.
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.