Popup opens with a scroll bar

[salazarm]

Is there a work-around for this? It looks like most of the CSS is in the iframe :\

import React from 'react';
import {PopupModal, useCalendlyEventListener} from 'react-calendly';

type Props = Pick<
  React.ComponentProps<typeof PopupModal>,
  'onModalClose' | 'prefill' | 'utm' | 'pageSettings'
> & {
  url?: string;
  isOpen: boolean;
};

export const CalendlyPopup = ({onModalClose, prefill, utm, pageSettings, isOpen}: Props) => {
  useCalendlyEventListener({
    onProfilePageViewed: () => console.log('onProfilePageViewed'),
    onDateAndTimeSelected: () => console.log('onDateAndTimeSelected'),
    onEventTypeViewed: () => console.log('onEventTypeViewed'),
    onEventScheduled: (e) => console.log(e.data.payload),
  });

  return (
    <PopupModal
      url="https://calendly.com/elementl-josh/dagster-demo?hide_gdpr_banner=1&text_color=4f43dd"
      pageSettings={pageSettings}
      utm={utm}
      prefill={prefill}
      onModalClose={onModalClose}
      open={isOpen}
      /*
       * react-calendly uses React's Portal feature (https://reactjs.org/docs/portals.html) to render the popup modal. As a result, you'll need to
       * specify the rootElement property to ensure that the modal is inserted into the correct domNode.
       */
      rootElement={document.getElementById('root')!}
    />
  );
};

I'm passing undefined for pageSettings

[daviddutch]

Hi @salazarm, I have the same issue. How did you solve it? Thanks

[OzzieOrca]

Same here. Why was this closed?

[ryans1224]

same issue

[tcampb]

@daviddutch @OzzieOrca @ryans1224 -

The scrollbar appears when the iframe content's height exceeds the height of the parent container. Unfortunately, this is not something we can change within the react-calendly library as we cannot change the iframe content's height dynamically based on the parent window's height.

That said, Calendly's public api released an endpoint that allows you to retrieve the available time slots by event type, so it's possible that you could change the height based on the number of available times returned by the api.

https://developer.calendly.com/api-docs/6a1be82aef359-list-event-type-available-times

[superchordate]

I was able to fix this by adding height, as stated under Advanced Usage at https://www.npmjs.com/package/react-calendly:

import React from "react";
import { InlineWidget } from "react-calendly";

const Calendly = () => {
  return (
    <div className="relative bottom-8">
      <InlineWidget url="https://calendly.com/yourusername/yourevent" styles={{height: '1000px'}}/>
    </div>
  );
};

export default Calendly;

[tcampb]

Version 4.3.1 updates the useCalendlyEventListener hook to include an onPageHeightResize option.

This allows you to resize the parent container when the Calendly scheduling page's height changes.

For example:

import {
  InlineWidget,
  useCalendlyEventListener,
} from "react-calendly";

function App() {
  const [height, setHeight] = useState('500px');
  const onPageHeightResize = (e) => setHeight(e.data.payload.height);

  useCalendlyEventListener({
    onPageHeightResize
  })

  return (
    <>
      <InlineWidget
        styles={{ height }}
        url="https://calendly.com/acmesales"
      />
    </>
  );
}