Welcome to StackOverflow, @wingej0.
There is a special JavaScript API for invoking Calendly widgets from single-page applications in Angular, React, etc. With this API, you can control exactly when you want the widget to be initialized, instead of having it initialize upon page load.
General instructions
First, add a data-auto-load="false" attribute to the .calendly-inline-widget and remove the data-url attribute. So the element should look like this:
<div class="calendly-inline-widget" style="min-width:320px;height:580px;" data-auto-load="false">
Then, execute this code after when you want to initialize the Calendly widget:
Calendly.initInlineWidget({
url: 'https://calendly.com/test-cei',
parentElement: document.querySelector('.calendly-inline-widget'),
});
More documentation here: Calendly Advanced embed options
Wrapping it in an Angular component
As outlined above, in order to dynamically create a Calendly embed widget, we need two things:
- Create a container element that the Calendly iframe will be rendered into by the Calendly Embed API
- Call the Calendly Embed API
These two things combine perfectly in a Component:
import {
Component,
NgModule,
VERSION,
ElementRef,
ViewChild
} from '@angular/core'
@Component({
selector: 'app-calendly-widget',
template: `
<div #container class="calendly-inline-widget" style="min-width:320px;height:580px;" data-auto-load="false"></div>
`
})
export class CalendlyWidgetComponent {
@ViewChild('container') container: ElementRef;
ngOnInit() {
Calendly.initInlineWidget({
url: 'https://calendly.com/test-cei',
parentElement: this.container.nativeElement
});
}
The above code (TypeScript) defines a component that renders the container and immediately calls the Calendly Embed API upon initialization. We use Angular's @ViewChild to access the raw DOM element that the component renders.
Here's a working demo: https://plnkr.co/edit/mpl6l8ifxc1amS611DMD?p=preview (note that it uses an older version of Angular than you're using, let me know if you have compatibility issues)
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
