react-booking-calendly 📅

A React component for booking and scheduling available time slots with ease. react-booking-calendly lets you display a calendar with available for booking, providing a clean and customizable interface.

Installation

Install the package via npm:

npm install react-booking-calendly

or with yarn:

yarn add react-booking-calendly

Usage

To use react-booking-calendly, import and use the main component in your application.

Example

import BookingCalendar from "react-booking-calendly";

const App = () => { 
  // Handle submission of booking data
  const onBookingSubmit = (data) => {
     console.log("Booking Data:", data);
  };

  // Define available time slots by day of the week
  const availabilities = [
    {
      day: "Thursday",
      time: [
        {
          startingTime: "1:00AM",
          endingTime: "7:00AM",
        },
      ],
    },
    {
      day: "Monday",
      time: [
        {
          startingTime: "6:00PM",
          endingTime: "8:00PM",
        },
      ],
    },
  ];

  // Define reserved slots with specific dates and times
  const reservedSlots = [
    {
      date: "2024-11-07",
      startingTime: "1:15AM",
      endingTime: "2:15AM",
    },
    {
      date: "2024-11-11",
      startingTime: "6:30PM",
      endingTime: "7:30PM",
    },
  ];

  return (
    <BookingCalendar
      availabilities={availabilities}
      reservedSlots={reservedSlots}
      interval={1} // Time interval between available slots (in hours)
      onBookingSubmit={onBookingSubmit}
      primaryColor={"#008000"} // Customize color
      buttonLabel={"Book"}
    />
  );
};

export default App;

Props

The BookingCalendar component accepts the following props:

| Prop | Type | Description | |------------------|---------------|-------------------------------------------------------------------------------------------------------| | availabilities | array | An array of objects defining available times by day of the week. | | reservedSlots | array | An array of objects defining reserved times with specific dates. | | interval | number | The interval between time slots (in hours). | | onBookingSubmit| function | Callback function triggered when a user clicks the "Book" button. Receives booking details. | | | primaryColor | string | Customize the primary color of the calendar and time slots. | | buttonLabel | string | Customize the button text shown to users (e.g., "Book", "Reserve"). |

Callback Data

When the user selects a time slot and clicks the booking button, onBookingSubmit returns booking data with the following format:

{
  startingTime: "6:00PM",
  endingTime: "7:00PM",
  date: "2024-11-06",
  timeZone: "America/New_York"
}

Customization

• Colors: Use the primaryColor prop to set the calendar's main color (e.g., "#008000").
• Button Title: Set buttonLabel to change the text displayed on the booking button.

Dependencies

• moment: This package is used for time management and formatting.

License

MIT