# 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

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

## Quick Start

```tsx
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

```typescript
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

```tsx
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

```tsx
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

```tsx
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.

```tsx
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:

```tsx
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

```bash
# 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.