How to embed appointment booking calendar on React

React appointment booking widget to embed on your website from GitHub or install from NPM. The dayschedule appointment picker is designed to display available time-slots on your React website.

React.js is a free and open-source front-end framework for building user interfaces using smaller UI components. The React library is used by many popular websites including Instagram, Netflix and more.

The react package itself has around 2 millions downloads every week from NPM.

Now that your React website is up and running, it’s time to supercharge your website by integrating an appointment scheduling widget to take online appointments.

In this article, I will show you how to use our JavaScript widget to embed the, and bonus point - I will be using tailwind CSS for template styling for a better and responsive booking button.

Setup

Install react, tailwind CSS and dayschedule-widget dependency to setup your project.

npm i dayschedule-widget

React component

Create a button component to make reusable booking buttons to use anywhere in your React project.

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCalendar } from '@fortawesome/free-solid-svg-icons';
import 'dayschedule-widget/dist/dayschedule-popup.css';
import 'dayschedule-widget/dist/dayschedule-widget.js';

export default class DayScheduleButton extends React.Component {
  handleClick = () => {
    daySchedule.initPopupWidget({ url: 'https://meet.dayschedule.com' });
  };

  render() {
    return (
      <button
        onClick={this.handleClick}
        className="bg-indigo-500 text-white my-5 py-4 px-8 text-lg rounded-lg shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring focus:ring-indigo-200"
      >
        <FontAwesomeIcon icon={faCalendar} className="mr-2" />
        Book an Appointment
      </button>
    );
  }
}

Imports necessary components from React, FontAwesome for calendar icons, and the ‘dayschedule-widget’ library.
Create a class component named DayScheduleButton or any name you want.
The handleClick method initializes a popup widget from the ‘dayschedule-widget’ library, pointing to your scheduling link to display available time slots.
The component renders a button with the label Book an Appointment.
When the button is clicked, it triggers the handleClick method, opening a DaySchedule popup widget for scheduling appointments.

Usage

Now, we’ve created a DayScheduleButton component in our React application, follow these steps to use it in your app:

import React from 'react';
import DayScheduleButton from './DayScheduleButton';

Include the DayScheduleButton component in your JSX:
Place the <DayScheduleButton /> tag inside the component where you want the book appointment button to appear. For example, in a parent component’s render method:

class YourComponent extends React.Component {
  render() {
    return (
      <div>
        {/* Other content */}
        <DayScheduleButton />
        {/* More content */}
      </div>
    );
  }
}