SwayWidget Integration Demo

This page demonstrates the SwayWidget component in both "picker" and "full" modes

Integration Demo

This widget can be embedded into n4-shell's BookingForm or used standalone. Try both modes to see how they work.

Picker Mode

Shows only the calendar and time slots. Perfect for embedding in an existing form. Parent component handles the booking submission.

Select a Date

Choose a date to see available time slots

January 2026

Code Example

import { SwayWidget } from 'app-calendar/lib/widget';

<SwayWidget
  teamSlug="melissa"
  eventSlug="school-tour"
  mode="picker"
  onSlotSelected={(slot) => {
    // Store slot in form state
    setSelectedSlot(slot);
  }}
  theme={{
    primary: '#44978b',
    secondary: '#e6b800',
  }}
/>

Integration Notes

Picker Mode: Use this when you want to embed the date/time picker in an existing form (like n4-shell's BookingForm). The parent component controls form submission and calls Sway's GraphQL API.

Full Mode: Use this for a standalone booking page. The widget handles everything internally including form submission and confirmation display.

Theme: Both modes accept custom theme colors to match your app's design system.

📖 See /docs/SWAY_INTEGRATION.md for complete documentation and integration patterns.

Su	Mo	Tu	We	Th	Fr	Sa