如何从嵌入的 Calendly 日程中删除滚动条？

Question

我已将日历调度程序嵌入到我的 html、css 网站中，但它包含自己的滚动条，这会给网站功能带来问题。如何删除滚动条？

Calendly 嵌入代码

  <!-- 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 -->

Answer 1

Calendly 在他们的文档中建议容器（高度）对于小部件来说太小。

文档建议将高度增加到

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

Answer 2

如果您使用弹出文本小部件而不是内联小部件，这是我这边的解决方案： 提示是将包装器 .calendly-popup 的默认高度从 680px 增加到 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>

Answer 3

改变

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

到

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

我尝试添加溢出：隐藏，这似乎不起作用，这是一个 PITA。不过，只要在高度上增加 20px 似乎就可以了。你可以做一些 JS 来检查内容是否溢出 div 并调整高度以适应像here

Answer 4

只需在附加 CSS 中添加以下 CSS 代码即可：

.calendly-inline-widget iframe {
height: 1000px !important;
}

它将解决台式机、平板电脑和移动设备上的所有滚动问题。

Answer 5

我已经用 calendly 的 lnline 嵌入代码解决了一段时间。 所以最后我改用table和iframe来固定滚动条与移动像这样

从您使用的calendly复制链接。

https://calendly.com/kumaladevelopment/60min

添加此代码的链接

<!-- Calendly iframe begin -->
<style>
* { margin:0 padding:0 }
body { margin:0; padding:0; text-align:center }  
#hold_iframe { padding:0px; margin:0 auto; width:100%; height:2000px }
</style>
<table border=0 cellspacing=0 cellpadding=0 id="hold_iframe">
    <iframe src="https://calendly.com/kumaladevelopment/60min" 
width=100% height=2000 marginwidth=0 marginheight=0 frameborder=0></iframe>
</table>
<!-- Calendly iframe end -->

我将高度调整为2000px，因为当你选择时间时，那很长。 您可以根据您的页面自行调整此代码。

我希望这有帮助。

Answer 6

将以下内容添加到您的嵌入代码中。

溢出：隐藏；