How to dynamically update Calendly widget URL and reload calendar display

Other Questions Calendly
1

I’m working on a web application where users can select different team members and view their availability through embedded Calendly calendars. The challenge I’m facing is that when a user switches between different people, I need to update the calendar widget to show the new person’s schedule.

Currently, I have this HTML structure for the calendar widget:

<div class="calendly-embed-container" data-calendly-url="https://calendly.com/example-user"></div>

When someone selects a different person from a dropdown menu, I want to modify the data-calendly-url attribute using JavaScript and force the widget to refresh with the new calendar data. The problem is that simply changing the attribute value doesn’t automatically reload the calendar view.

What’s the proper way to programmatically change the URL parameter and trigger a re-render of the Calendly widget?

2

Had this exact problem building a booking system for our consulting firm. Calendly widgets won’t refresh when you just update the data attribute - you’ve got to reinitialize the whole thing. Here’s what works: clear the container content first, then call Calendly.initInlineWidget() again with your new URL. When the dropdown changes, empty your calendly-embed-container div, update the data-calendly-url attribute, and reinitialize using the Calendly JavaScript API. Make sure the Calendly embed script’s fully loaded before you try reinitializing. Been using this approach in production for over a year - works like a charm.