Scheduling Widget

A customizable scheduling widget component that can be embedded in any React application. This widget provides a popup interface for scheduling meetings with different teams.

Installation

npm install scheduling-widget

Usage

import { SchedulingWidget } from 'scheduling-widget';

function App() {
  const handleSchedule = (data) => {
    console.log('Scheduled meeting:', data);
    // Handle the scheduling data here
  };

  return (
    <SchedulingWidget
      buttonText="Schedule a Meeting"
      buttonVariant="contained"
      buttonColor="primary"
      onSchedule={handleSchedule}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | buttonText | string | 'Schedule a Meeting' | Text to display on the trigger button | | buttonVariant | 'text' | 'outlined' | 'contained' | 'contained' | Material-UI button variant | | buttonColor | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | 'primary' | Material-UI button color | | onSchedule | (data: SchedulingData) => void | undefined | Callback function when a meeting is scheduled |

SchedulingData Type

interface SchedulingData {
  name: string;
  email: string;
  date: Date;
  timeSlot: string;
  team: string;
}

Features

• Customizable button appearance
• Date picker with minimum date validation
• Predefined time slots
• Team selection
• Form validation
• Responsive design
• Material-UI components

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build the package
npm run build

License

MIT