📅 React Booking Widget

A beautiful, customizable React booking component for appointment scheduling. Drop it into any React app — calendar, time slots, and booking form included.

Features

• 📅 Interactive Calendar — Navigate months, see available dates at a glance
• ⏰ Time Slot Picker — Auto-fetches available slots per date
• 📝 Built-in Form — Name, email, phone, service selection, meeting type
• 🎨 Fully Customizable — Change colors, services, labels, everything
• 📱 Mobile Responsive — Works perfectly on all screen sizes
• 🔌 API Agnostic — Works with any backend that serves available slots
• 🚫 No Dependencies — Only React as a peer dependency
• ✨ Beautiful Default Styles — Looks great out of the box

Quick Start

npm install @softangeles/react-booking-widget

import { BookingWidget } from '@softangeles/react-booking-widget';
import '@softangeles/react-booking-widget/dist/styles.css';

function App() {
  return (
    <BookingWidget
      apiUrl="https://your-api.com/api/bookings"
      title="Book a Free Consultation"
      primaryColor="#6366f1"
      onSuccess={(booking) => console.log('Booked!', booking)}
    />
  );
}

API Contract

Your backend needs to implement these endpoints:

GET /available-dates?month=YYYY-MM

Returns which dates have available slots:

{
  "month": "2024-03",
  "dates": [
    { "date": "2024-03-04", "has_slots": true, "slot_count": 8 },
    { "date": "2024-03-05", "has_slots": false, "slot_count": 0 }
  ]
}

GET /available-slots?date=YYYY-MM-DD

Returns available time slots for a date:

{
  "date": "2024-03-04",
  "slots": ["09:00", "09:30", "10:00", "10:30", "14:00", "14:30"]
}

POST /book

Creates a booking:

{
  "name": "John Smith",
  "email": "john@example.com",
  "phone": "555-1234",
  "businessName": "Smith Law",
  "service": "consultation",
  "meetingType": "zoom",
  "message": "Interested in a website redesign",
  "date": "2024-03-04",
  "time": "10:00"
}

Returns:

{
  "referenceCode": "SA-AB12",
  "name": "John Smith",
  "email": "john@example.com",
  "bookingDate": "2024-03-04",
  "bookingTime": "10:00",
  "status": "confirmed"
}

Props

Prop	Type	Default	Description
apiUrl	string	required	Base URL for booking API
title	string	"Book a Consultation"	Widget header title
subtitle	string	"Pick a date and time..."	Header subtitle
primaryColor	string	"#6366f1"	Brand color (hex)
services	{value, label}[]	Consultation, Website, Marketing	Service dropdown options
meetingTypes	{value, label}[]	Zoom, Phone, In Person	Meeting type options
slotDuration	string	"30 min"	Displayed slot duration
onSuccess	function	—	Called after successful booking
onError	function	—	Called on booking error
className	string	—	Additional CSS class

Customization

Custom Colors

<BookingWidget
  apiUrl="/api/bookings"
  primaryColor="#10b981" // Green theme
/>

Custom Services

<BookingWidget
  apiUrl="/api/bookings"
  services={[
    { value: 'haircut', label: '💇 Haircut' },
    { value: 'color', label: '🎨 Color Treatment' },
    { value: 'styling', label: '✨ Styling' },
  ]}
/>

Custom Styles

Override any CSS class prefixed with sa-bw-:

.sa-bw-root {
  max-width: 600px;
  border-radius: 24px;
}

.sa-bw-header {
  background: linear-gradient(135deg, #10b981, #059669);
}

Development

git clone https://github.com/softangeles/react-booking-widget.git
cd react-booking-widget
npm install
npm run dev    # Start demo
npm run build  # Build package

Need a Complete Booking Solution?

This widget handles the frontend. Need the full stack?

SoftAngeles builds custom booking systems, websites, and digital solutions for businesses.

• 🌐 Custom website design & development
• 📅 Full booking system with admin dashboard
• 📱 Mobile-responsive, SEO-optimized
• 🇺🇸 Based in Los Angeles, CA

Book a free consultation →

License

MIT © SoftAngeles