Unified React Calendar Scheduler

A modern, customizable React calendar scheduler component for booking appointments and managing availability.

Features

• 📅 Interactive calendar interface
• ⏰ Time slot selection with conflict detection
• 🔄 Integration with Unified.to API for real-time availability
• 📱 Responsive design
• 🔧 TypeScript support
• 🚀 Easy to integrate

Installation

npm install @unified-api/react-calendar-scheduler

Quick Start

import React from 'react';
import { CalendarScheduler } from '@unified-api/react-calendar-scheduler';
// Import the CSS file for styling
import '@unified-api/react-calendar-scheduler/dist/calendar-scheduler.css';

function App() {
    const handleBooking = (bookingData) => {
        console.log('Booking data:', bookingData);
        // Handle the booking (e.g., send to your API)
    };

    return <CalendarScheduler duration={60} bookFn={handleBooking} start_hour={9} end_hour={17} />;
}

Props

CalendarSchedulerProps

| Prop | Type | Default | Description | | ----------------- | ----------------------------- | --------------- | ----------------------------------------------- | | busy | CalendarBusy[] | [] | Array of busy time slots | | available | CalendarBusy[] | [] | Array of available time slots | | connection_id | string | - | Unified.to connection ID for API integration | | api_token | string | - | Unified.to API token (⚠️ never use in frontend) | | duration | number | 60 | Appointment duration in minutes | | months | string[] | English months | Array of month names | | days | string[] | English days | Array of day names | | type | string | 'Appointment' | Type of booking | | bookFn | (form: BookingForm) => void | - | Function called when booking is submitted | | defaultTimezone | string | User's timezone | Default timezone | | work_days | number[] | [1,2,3,4,5] | Working days (0=Sunday, 1=Monday, etc.) | | dc | 'us' \| 'eu' \| 'au' | 'us' | Data center for API calls | | start_hour | number | 9 | Start hour for available slots | | end_hour | number | 17 | End hour for available slots |

Types

interface CalendarBusy {
    start_at: string; // ISO date
    end_at: string; // ISO date
}

interface BookingForm {
    name: string;
    email: string;
    date: string;
    time: string;
    duration: number;
    timezone: string;
    notes?: string;
}

Examples

Basic Usage

import { CalendarScheduler } from '@unified-api/react-calendar-scheduler';
import '@unified-api/react-calendar-scheduler/dist/calendar-scheduler.css';

function BasicExample() {
    const handleBooking = (booking) => {
        console.log('New booking:', booking);
    };

    return <CalendarScheduler duration={30} bookFn={handleBooking} start_hour={8} end_hour={18} />;
}

With Unified.to Integration

import { CalendarScheduler } from '@unified-api/react-calendar-scheduler';
import '@unified-api/react-calendar-scheduler/dist/calendar-scheduler.css';

function UnifiedExample() {
    const handleBooking = (booking) => {
        // Send booking to your backend
        fetch('/api/bookings', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(booking),
        });
    };

    return <CalendarScheduler connection_id="your_connection_id" api_token="your_api_token" duration={60} bookFn={handleBooking} dc="us" />;
}

With Custom Busy Times

import { CalendarScheduler } from '@unified-api/react-calendar-scheduler';
import '@unified-api/react-calendar-scheduler/dist/calendar-scheduler.css';

function CustomBusyExample() {
    const busyTimes = [
        {
            start_at: '2024-01-15T10:00:00Z',
            end_at: '2024-01-15T12:00:00Z',
        },
        {
            start_at: '2024-01-16T14:00:00Z',
            end_at: '2024-01-16T16:00:00Z',
        },
    ];

    return <CalendarScheduler busy={busyTimes} duration={45} bookFn={(booking) => console.log(booking)} />;
}

Custom Styling

The component includes embedded CSS styles. You can customize the appearance by overriding the CSS classes or wrapping the component in your own styled container.

import { CalendarScheduler } from '@unified-api/react-calendar-scheduler';
import '@unified-api/react-calendar-scheduler/dist/calendar-scheduler.css';

function StyledExample() {
    return (
        <div className="my-custom-container">
            <CalendarScheduler duration={60} bookFn={(booking) => console.log(booking)} />
        </div>
    );
}

Styling

The component includes embedded CSS styles that are automatically included when you import the CSS file. No additional CSS framework is required.

To use the component with its default styling, simply import the CSS file:

import '@unified-api/react-calendar-scheduler/dist/calendar-scheduler.css';

You can customize the appearance by:

• Overriding the CSS classes in your own stylesheet
• Wrapping the component in a custom container
• Modifying the CSS variables (if supported in future versions)

API Integration

When using connection_id and api_token, the component will automatically fetch busy times from the Unified.to Calendar Busy API.

Development

# Install dependencies
npm install

# Start development mode
npm run dev

# Build for production
npm run build

# Run tests
npm test

# Lint code
npm run lint

License

This project is licensed under the MIT License.

Support

If you have any questions or need help, please open an issue on GitHub.