@unified-api/react-calendar-scheduler
Version:
A React calendar scheduler component for booking appointments
200 lines (149 loc) • 6.49 kB
Markdown
# 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.