0

I'm trying to embed a calendly widget into my angular app, but I find that it doesn't work consistently.

Firstly I add this line to my component's HTML:

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

and this line to the index.html:

<script src="https://assets.calendly.com/assets/external/widget.js" async></script>

This works initially but then the embedded calendar vanishes whenever the page reloads.

By reading the Advanced Embed Options in Calendly's documentation, I attempted a slightly different approach, where my ngOnInit() function looks like this:

ngOnInit(): void {
  Calendly.initInlineWidget({
    url: 'https://calendly.com/my-calendar-link',
    parentElement: document.querySelector('.calendly-inline-widget'),
  });
}

and I've also added data-auto-load="false" to the div in the HTML, but I get the error message "Cannot find name 'Calendly'" and I'm unsure where Calendly should be declared or imported from.

Any suggestions on how I can get the calendar working?

4

2 回答 2

0

I've managed to get this working by adding the following:

export {}; declare global { interface Window { Calendly: any; } }

and then changing ngOnInit() to :

ngOnInit(): void {
  window.Calendly.initInlineWidget({
    url: 'https://calendly.com/my-calendar-link',
    parentElement: document.querySelector('.calendly-inline-widget'),
  });
}

Credit to comment here Calendly Widget not working in IE (Angular App)

于 2021-07-28T13:06:47.260 回答
0

This still gave me errors when reloading the page, so I, not being either an expert Angular nor Javascript developer, did an ugly workaround based on the helpful answer already given in order to force the Calendly object to always be there when I need it. I'll leave it here for whom it might be useful for.

  1. Copied the external javascript file https://assets.calendly.com/assets/external/widget.js to src/assets/js/calendly.js

  2. Removed the implicit anonymous function call and wrapped the whole damned thing in a named function - not called immediately, like so:

     function preInitCalendly() {
    console.debug('Calendly pre-initialization for ' + this);
    this.Calendly = {};

    this.Calendly._util = {};

    Calendly._util.domReady = function(callback) {
       ...
    };

 ... and the rest, all the way to the end of the file ...

 }

  3. Removed the final Calendly._autoLoadInlineWidgets()

  4. Added src/assets/js/calendly.js to the "scripts" in angular.json

  5. Added the script to index.html

  6. Call the shite in the onInit part of the component

index.html

...
<head>
   ...
   <script async src="assets/js/calendly.js"></script>
</head>
...

calendly.component.html

<div class="calendly-inline-widget" data-auto-load="false"></div>

calendly.component.ts

export {};
declare global {
   interface Window {
      Calendly: any;
   }
}
declare var preInitCalendly: Function;

@Component({
   selector: 'app-calendly',
   templateUrl: './calendly.component.html',
   styleUrls: ['./calendly.component.css']
})
export class CalendlyComponent implements OnInit {
   url = 'https://calendly.com/my_calendly_location';

   constructor() {
   }

   ngOnInit(): void {
      preInitCalendly();
      window.Calendly.initInlineWidget({
         url: this.url,
         parentElement: document.querySelector('.calendly-inline-widget'),
         prefill: {}
      });
   }

It's not pretty, but it seems to be working reliably.

于 2021-11-04T10:58:06.747 回答