Meeting Scheduler React Component

A beautiful, responsive, and user-friendly 30-minute meeting booking calendar component.
No Tailwind CSS dependency — built with pure custom CSS.
Works seamlessly in any React project (Next.js, Vite, Create React App, etc.).

Features

• Auto-detects user's timezone
• Disables past dates and slots that are too soon (less than 1 hour away)
• Fetches real-time available slots from your API
• Form validation + loading states
• Customizable API base URL, user ID, and availability ID
• Success/error callbacks for booking events
• Fully responsive design (mobile + desktop)

Installation

npm install meeting-scheduler-npm-package
# or
yarn add meeting-scheduler-npm-package
# or
pnpm add meeting-scheduler-npm-package



```tsx
import React from 'react';
import { MeetingScheduler } from 'meeting-scheduler-npm-package'; 

function BookingPage() {
  return (
    <div style={{ padding: '2rem', maxWidth: '1400px', margin: '0 auto' }}>
      <MeetingScheduler
        apiBaseUrl="http://160.250.197.118:9000/api"
        defaultAvailabilityId={7}
        onBookingSuccess={(data) => console.log("Booked!", data)}
        primaryColor="#646545"
        badgeText="Checking Session"
      />
    </div>
  );
}

export default BookingPage;