react-calendly

What is react-calendly?

The react-calendly npm package allows you to easily integrate Calendly scheduling widgets into your React applications. It provides components to embed Calendly inline, as a popup widget, or as a popup text link, making it simple to add scheduling functionality to your app.

What are react-calendly's main functionalities?

Inline Widget

The InlineWidget component allows you to embed a Calendly scheduling widget directly into your React application. You just need to provide the URL of your Calendly scheduling page.

import { InlineWidget } from 'react-calendly';

function App() {
  return (
    <div>
      <h1>Schedule a Meeting</h1>
      <InlineWidget url="https://calendly.com/your-calendly-url" />
    </div>
  );
}

Popup Widget

The PopupWidget component allows you to add a button that, when clicked, opens a Calendly scheduling widget in a popup. This is useful if you want to keep your page clean and only show the scheduler when needed.

import { PopupWidget } from 'react-calendly';

function App() {
  return (
    <div>
      <h1>Schedule a Meeting</h1>
      <PopupWidget url="https://calendly.com/your-calendly-url" />
    </div>
  );
}

Popup Text

The PopupText component allows you to create a text link that, when clicked, opens a Calendly scheduling widget in a popup. This is useful for integrating scheduling links into your text content.

import { PopupText } from 'react-calendly';

function App() {
  return (
    <div>
      <h1>Schedule a Meeting</h1>
      <PopupText url="https://calendly.com/your-calendly-url" text="Click here to schedule!" />
    </div>
  );
}

Other packages similar to react-calendly

react-schedule-meeting

The react-schedule-meeting package provides a customizable scheduling component for React applications. Unlike react-calendly, which integrates directly with Calendly, react-schedule-meeting is a more generic solution that allows you to create your own scheduling logic and UI.

react-big-calendar

The react-big-calendar package is a powerful and flexible calendar component for React. It allows you to create and manage events on a calendar, but it does not provide direct integration with scheduling services like Calendly. It is more suitable for applications that need a full-featured calendar view.

react-availability-calendar

The react-availability-calendar package is designed to display availability and manage bookings. It is similar to react-calendly in that it focuses on scheduling, but it does not integrate with Calendly. Instead, it provides a customizable calendar component for managing availability.

README

react-calendly

Calendly integration for React apps

Install

npm install --save react-calendly

Usage

Components

• Inline
• PopupText
• PopupWidget

Inline

Property	Type	Required	Default
url	string	true	-
styles	React.CSSProperties	false	{ minWidth: "320px", height: "630px" }

PopupText

Property	Type	Required	Default
url	string	true	-
text	string	true	-

PopupWidget

Property	Type	Required	Default
url	string	true	-
text	string	true	-
color	string	false	#00a2ff
textColor	string	false	#ffffff
branding	boolean	false	false

License

MIT © tcampb