Embed a scheduling calendar in your application
WTS Calendar is a TypeScript scheduling calendar library for JavaScript, React, Angular, Vue, Web Components, and React Native. Render events and appointments in month, week, day, list, multi-month, and resource views while keeping your own application and data layer.
Scheduling UI for real product workflows
Use one embedded calendar surface for appointments, team schedules, resource allocation, availability, or operational planning. WTS Calendar is a client package rather than a hosted scheduling service, so authentication, storage, and business ownership remain in your application.
Appointment scheduling
Display working hours, timed events, selection, drag and resize interactions, named time zones, and recurring appointments.
Resource scheduling
Organize people, rooms, and equipment in resource grids and timelines with capacity and assignment policies.
Booking workflows
Calculate available slots, apply notice and buffer rules, assign staff, and connect approval or cancellation actions to your own backend.
Start with an embedded weekly schedule
The same core API works in plain JavaScript and through the official React, Angular, and Vue wrappers. Event sources receive a bounded visible range and an abort signal, allowing the host application to load only the data the current view needs.
import '@wts-calendar/core/styles/calendar.css';
import { WtsCalendar } from '@wts-calendar/core';
import { timeGridModule } from '@wts-calendar/core/time-grid';
const container = document.querySelector<HTMLElement>('#calendar');
if (!container) throw new Error('Calendar container not found');
const calendar = new WtsCalendar({
container,
plugins: [timeGridModule],
view: 'week',
timeZone: 'America/New_York',
businessHours: true,
selectable: true,
eventSources: [
async ({ start, end, signal }) => loadSchedule({ start, end, signal }),
],
select: ({ startStr, endStr }) =>
openAppointmentForm({ start: startStr, end: endStr }),
}); Configure timeZone as local, UTC, or an IANA zone. Calendar views, recurrence, navigation, interactions, and formatting follow the same DST-aware date policy.
Choose the capabilities your product needs
Calendar rendering and interaction
- Month, DayGrid, TimeGrid, list, multi-month, and year views
- Event sources, recurrence, time zones, selection, drag, and resize
- Angular, React, Vue, Web Component, and React Native adapters
- Rendering hooks, themes, accessibility, and localization
Booking and resource operations
- Available-slot calculation, duration choices, buffers, and minimum notice
- Manual or round-robin staff assignment and capacity-based group booking
- Resource grids, timelines, availability, and advanced planning
- Confirmation, approval, rescheduling, cancellation, and lifecycle hooks
Connect your own backend when needed
WTS Calendar does not require or silently provision a hosted backend. Static schedules can stay entirely in the browser. Shared bookings should load bounded event ranges from your API and repeat the final availability, resource, and capacity check in an atomic server-side transaction.