React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

WebinarCalendar

Webinar session calendar with seat availability

Interactive Demo

Currently, there are no upcoming events. Please check back later!

API Reference

Prop	Type	Default	Description
slug	string	''	Webinar slug identifier
username	string	''	User identifier
isDemo	boolean	false	Enable demo mode
primaryColor	string	'#5383ff'	Primary color for UI elements
apiBaseUrl	string	''	API base URL for fetching data
sessionsPerPage	number	3	Number of sessions to display per page
previewDemoSessions	WebinarSession[]	[]	Demo sessions for preview mode
preview	boolean	false	Enable preview mode
preSelectedSession	string	-	Pre-selected session datetime
onTimeSelected	(session: WebinarSession) => void	-	Callback when session is selected
onInitialized	() => void	-	Callback when calendar is initialized
className	string	-	Additional CSS classes

Features

• Displays webinar sessions with date, time, and seat availability

• Pagination for navigating through sessions

• Automatic timezone detection and display

• Disabled state for fully booked sessions (0 available seats)

• Auto-selection of single available session

• Support for pre-selected sessions with auto-scroll

• Loading states with spinner

• Error handling with user notifications

WebinarSession Type

interface WebinarSession {
  booking_id: string;
  date: string;              // ISO datetime string
  stime: string;             // Start time (e.g., "10:00 AM")
  end_time: string;          // End time (e.g., "11:00 AM")
  startDateTime: string;     // ISO datetime string
  available_seats: number;   // Number of available seats
  total_seats: number;       // Total number of seats
  placeholder?: boolean;     // Internal use for UI spacing
}

Usage Notes

• Requires API integration for production use (useWebinarSessions hook)

• Use isDemo={true} and provide previewDemoSessions for testing without API

• Sessions with available_seats = 0 are displayed but disabled

• Component handles unsupported timezones with fallback mapping

• Navigation buttons appear only when there are more sessions than sessionsPerPage

• Preview mode uses shorter date format (no weekday)