React

Table of Contents

1. Introduction
2. Installation
3. Usage
4. API Reference
5. Props

Introduction

The @scheddev/sched-react package provides a React wrapper component for the Sched.js booking calendar library. It simplifies the integration of the booking calendar into React applications.

Installation

To install the package, run the following command:

npm install @scheddev/sched-react

Usage

To use the BookingFlow component in your React application:

1. Import the component:

import { BookingFlow } from "@scheddev/sched-react";

2. Use the component in your JSX, providing the necessary props:

<BookingFlow
  clientId="your-client-id"
  resourceId="your-resource-id"
/>

API Reference

BookingFlow Component

The BookingFlow component is a functional React component that wraps the Sched.js library.

Implementation Details

• The component uses the useEffect hook to initialize the Sched instance when the component mounts or when its dependencies change.
• It creates a div with the ID "sc-calendar-container" which serves as the container for the Sched calendar.
• The Sched instance is attached to the window object as window.instance for debugging purposes.

Props

The BookingFlow component accepts the following props:

Note: Either resourceId or resourceGroupId must be provided, but not both.

Error Handling

The component will log an error to the console if any of the required props are missing:

if (!clientId || (!resourceId && !resourceGroupId) || !apiUrl) {
  console.error("Missing clientId, apiUrl or resourceId/resourceGroupId");
  return;
}

Example

Here's a complete example of how to use the BookingFlow component:

import React from 'react';
import { BookingFlow } from '@scheddev/sched-react';

function App() {
  return (
    <div className="App">
      <h1>Booking Calendar</h1>
      <BookingFlow
        clientId="your-client-id"
        resourceId="your-resource-id"
        apiUrl="https://your-api-url.com"
      />
    </div>
  );
}

export default App;

This will render the Sched booking calendar within your React application.

Note: Ensure that you have the necessary API access and credentials before using this component. The Sched.js library should be properly installed as a dependency of the @scheddev/sched-react package.