Skip to main content

I tried adding the code from several articles but it didn’t work.  i.e.: from the article at https://developer.calendly.com/release-notes it says:

“To automatically resize the standard html embed code, data-resize="true" will need to be added as an attribute:

<div class="calendly-inline-widget"

data-url="http://calendly.com/YOUR-LINK"

data-resize="true"

style="min-width:320px;height:700px;">

</div>

However, the code of my calendly does NOT match this.  There is not a ‘style’ section in the code, and so I tried inserting data-resize=”true” after my data-url part and before my <script type= part.  That did nothing to the calendar but instead just showed the text I’d added as text below the calendar.  I also tried inserting it after the <script type= part, but that also just displayed data-resize=”true” as text below my calendar.

Here is my code (with some details obscurred for privacy):

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

Can anyone please help me figure out where I am supposed to insert the automatic resize code or if there is a more suitable solution for getting my calendly calendar to automatically resize itself to fit the screen of the user so they do not have to scroll with a side bar to see the entire calendar?

Thanks!

I’m not sure I understand exactly where you added your data-resize=”true” attribute but it sounds like you added it outside of your <div> tag, between </div> and <script> which would cause the text to appear as plain text in your page.

This is the correct placement of the data-resize attribute would be like this:

<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/myname-zqan/my-url" data-resize=”true” style="min-width:320px;height:700px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end →


just add data-resize inside the div tag after data-url should fix the issue