How to remove scroll bar from embedded Calendly schedule?

Question

I have embedded a calendly scheduler into my html, css website however it includes its own scroll bar which creates issues for the website functionality. How do I go about removing the scroll bar?

Calendly Embedded Code

  <!-- Calendly inline widget begin -->
  <div class="calendly-inline-widget" data-url="https://calendly.com/kumaladevelopment/60min" style="min-width:320px;height:630px;"></div>
  <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
  <!-- Calendly inline widget end -->

score 3 · Answer 1 · answered Jan 10 '23 at 19:40

If you use Popup Text widget and not inline widget, here is the solution working on my side: The tips was to increase the default height of the wrapper .calendly-popup from 680px to 690px.

<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>

<style>.calendly-overlay .calendly-popup {max-height: 690px;}</style>

<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/xxx/yyy?hide_event_type_details=1&hide_gdpr_banner=1'});return false;">
Book a meeting
</a>

score 2 · Accepted Answer · answered Aug 29 '22 at 01:33

2

Change

<div class="calendly-inline-widget" data-url="https://calendly.com/kumaladevelopment/60min" style="min-width:320px;height:630px;"></div>

to

<div class="calendly-inline-widget" data-url="https://calendly.com/kumaladevelopment/60min" style="min-width:320px;height:650px;"></div>

I've tried adding overflow:hidden which doesn't seem to work which is a PITA. Just adding 20px to the height seems to work okay though. You could do a bit of JS to check if the contents were overflowing the div and adjust the height to suit like here

answered Aug 29 '22 at 01:33

Adam

5,495
2
7
24

1

I tried that and it ended up working. Seems like something weird with Calendly's code on their side with the height. Thank you for the help it was driving me crazy trying to hide the overflow-y and having it not work lol. – ohmygodimpregnant Aug 29 '22 at 01:57
For me increasing height did not help. The calendly content is always some pixels bigger than the div.calendly-inline-widget. Problems seems not to happen, if you use portrait orientation or just a mobile with a wider screen. – geekQ Feb 06 '23 at 13:35

score 2 · Answer 3 · answered Oct 13 '22 at 10:13

Calendly suggests in their docs the container (height) is to small for the widget.

The docs suggest increasing height to 750px:

<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR_EVENT" style="min-width:320px;height:750px;"></div>

https://help.calendly.com/hc/en-us/articles/360019861794-Common-embed-questions#3

score -2 · Answer 4 · answered Mar 29 '23 at 19:53

-2

Add the following to your embed code.

overflow:hidden;

answered Mar 29 '23 at 19:53

JPerry

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 03 '23 at 07:43

How to remove scroll bar from embedded Calendly schedule?

4 Answers4