PoC Example Component

[gfargo]

Any chance this repo will be a home to an implementation?

[gfargo]

Apologize for creating this, yesterday's self was a tired frustrated person and I could have been more tactful in my approach. If this repo ever does develop into something that would benefit from an additional contributor, I'd be happy to lend a hand.

Also, wanted to share my current implementation hoping it may assist you or others in the future.

import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';

const Calendly = ({account, event}) => {
  // Little overkill, but provides feedback/bails early if we're missing required props.
  if (!account) {
    return 'Missing required `account` prop.';
  }

  const calendlyScriptId = 'calendy_external_widget_script';
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    const head = document.querySelector('head');
    const script = document.createElement('script');
    script.setAttribute('src', 'https://assets.calendly.com/assets/external/widget.js');
    script.setAttribute('id', calendlyScriptId);
    head.appendChild(script);

    script.onload = () => {
      setLoading(false);
    }

    // Remove script on unmount.
    return () => {
      head.removeChild(document.getElementById(calendlyScriptId))
    }
  });


  return (
    <>
      {isLoading ? (
        <div className="py-8">
          <PageLoader />
        </div>
      ) : (
        <div
          className="calendly-inline-widget min-h-full"
          data-url={`https://calendly.com/${account}/${event}`}
          style={{ minWidth: '400px', height: '560px' }}
          data-auto-load="true"
        />
      )}
    </>
  );
}

Calendly.propTypes = {
  account: PropTypes.string.isRequired,
  event: PropTypes.string,
}

Calendly.defaultProps = {
  event: ''
}

export default Calendly;


...

// View of all events available for the account.
<Calendly account="my-calendly-account" />

// Display one specific event on the account.
<Calendly account="my-calendly-account" event="30min-interview" />

after checking previous example, realized there was an issue with the widget re-initializing after first unmount. Rewrote things to be functional, albeit hackish to reload same external script 🤦. I tried to follow this sample provided by Calendly team but couldn't figure out why it was failing to initialize via the Calendly.initInlineWidget.

[eliranamar]

Thats a cool trick with the account prop.

Actually we did a class component for this a while back, care to take a look and comment ?
https://gist.github.com/eliranamar/566498c5d1769a4aeabda8b794ccebdc

We might want to exclude the material ui styles. but not sure

perhaps open a PR ?