slotbooking.js v1.0.0

SlotBooking.js

A modern React time slot booking component library with a calendar picker and scheduler. Built with Material-UI and Emotion for a sleek, customizable UI.

Features

• 📅 Modern calendar picker with dark theme
• ⏰ Time slot selection with multiple slot support
• 🎨 Customizable themes and styles
• 📱 Responsive design
• 🔄 Built-in availability management
• 💪 TypeScript support
• 🎯 Zero-dependency core (only peer dependencies)

Installation

# npm
npm install slotbooking.js @mui/material @mui/x-date-pickers @emotion/react @emotion/styled date-fns

# yarn
yarn add slotbooking.js @mui/material @mui/x-date-pickers @emotion/react @emotion/styled date-fns

Quick Start

import { TimeScheduler, TimeSchedulerProvider } from 'slotbooking.js';

function App() {
  return (
    <TimeSchedulerProvider initialScheduleData={scheduleData}>
      <TimeScheduler />
    </TimeSchedulerProvider>
  );
}

Components

TimeScheduler

A complete scheduling solution with calendar and time slot selection.

import { TimeScheduler, TimeSchedulerProvider } from 'slotbooking.js';

// Example schedule data
const scheduleData = {
  availableTimeSlots: [
    { startTime: '09:00', endTime: '10:00' },
    { startTime: '10:00', endTime: '11:00' },
    // ...
  ],
  bookings: [
    { date: '2024-01-01', startTime: '09:00', endTime: '10:00' },
    // ...
  ]
};

function SchedulerExample() {
  return (
    <TimeSchedulerProvider initialScheduleData={scheduleData}>
      <TimeScheduler />
    </TimeSchedulerProvider>
  );
}

CalendarPicker

A standalone calendar component with customizable theme.

import { CalendarPicker, darkTheme } from 'slotbooking.js';

function CalendarExample() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);

  return (
    <CalendarPicker
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      onSelect={setSelectedDate}
      theme={darkTheme}
      availableDates={availableDates}
      minDate={minDate}
      maxDate={maxDate}
    />
  );
}

API Reference

TimeScheduler Props

TimeSchedulerProvider Props

CalendarPicker Props

Customization

Theming

The library comes with a built-in dark theme, but you can customize it:

const customTheme = {
  colors: {
    primary: '#00C853',
    secondary: '#757575',
    text: '#FFFFFF',
    // ... other color options
  },
  // ... other theme options
};

<CalendarPicker theme={customTheme} />

Development

# Install dependencies
yarn install

# Start development server
yarn dev

# Run tests
yarn test

# Build library
yarn build

License

MIT © Yuefeng Zhang