Calendly adjusts the calendar layout to fit the size of its container. You can change the layout and size to better fit your website or app.
Choose a layout based on width
Calendly’s inline embed has three layout styles. The style depends on the width of the container (called the “parent container”).
Large window layout
Parent element width >= 1000px
Example
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:1000px;height:700px;"></div>Medium window layout
Parent element width < 1000px and >= 650px
Example
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:700px;height:700px;"></div>Small window layout
Parent element width < 650px
Example
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:600px;height:700px;"></div>Remove scroll bars
If you see a scroll bar inside the embed:
- Increase the height in the embed code style="min-width:320px;height:750px;"
- Use data-resize="true" to enable auto-resize
Example:
<div
class="calendly-inline-widget"
data-url="https://calendly.com/your-link"
style="min-width:320px; height:750px;"
data-resize="true">
</div>
<script
type="text/javascript"
src="https://assets.calendly.com/assets/external/widget.js"
async>
</script>Minimum width for mobile
Calendly needs at least 320px of width to show correctly on mobile.
If the embed looks off-center or cut off:
- Check for extra padding or margins on mobile.
- Make sure the container is at least 320px wide.
Test your embed layout
After adding the embed:
- Check layout on both desktop and mobile
- Use your browser’s inspect tool to preview different sizes
- Adjust the container’s size or margins as needed