Interactive testing environment for react-shared components
Current: Default
Booking calendar component for scheduling meetings
Customize the calendar properties and see the changes in real-time
Choose Date
UTC
April 2026
| Prop | Type | Default | Description |
|---|---|---|---|
| slug | string | '' | Meeting slug identifier |
| username | string | '' | User identifier |
| isDemo | boolean | false | Enable demo mode |
| apiBaseUrl | string | '' | API base URL for fetching data |
| availability | Record<string, TimeSlot[]> | {} | Available time slots by date |
| preview | boolean | false | Enable preview mode |
| preSelectedDate | string | - | Pre-selected date (YYYY-MM-DD) |
| onDateSelected | (date: string) => void | - | Callback when date is selected |
| onTimeSelected | (slot: TimeSlot) => void | - | Callback when time slot is selected |
• Three-step booking flow: choose date → choose time → confirm
• Automatic timezone detection and display
• Month navigation with disabled past months
• Integration with availability API for real-time slot updates
• Loading states with spinner during data fetching
• Error handling with user notifications
• Support for demo/preview modes for testing
• Displays meeting duration alongside time slots
• Requires API integration for production use (useMeeting and useAvailability hooks)
• Use isDemo={true} and provide availability prop for testing without API
• TimeSlot type includes: startTime, ampm, startDateTime, stime
• Dates are formatted as YYYY-MM-DD for consistency
• Component handles unsupported timezones with fallback mapping