In AngularJS (Typescript)

In this Article:

1: Get ECAL widget details

You can get your ECAL widget details by logging into your ECAL Admin and navigating to the “Displays” > “Manage Displays” page. For the required button, click the icon to get the “Button Code”. Make a note of Widget ID and API Key (see below).

widget

2: Copy ECAL widget scripts to your project

Copy the 3 files below grouping them under ecal folder, and put this folder in app src folder where the Angular App Page can import or include it.

a. Copy the code snippet below and name it as ecal-sync-display-spa.js file.

/*
 * EmbedEcalScripts enabled to only embed ecal once.
 */
const host = '//sync.ecal.com';
function loadSyncDisplay (apikey) {
    if (!window.EcalWidget) {
      clearTimeout(window.loadSDTO);
      // debounce adding script on launch...
      window.loadSDTO = setTimeout(() => {
        const script = document.createElement('script');
        const src = `${host}/v2/ecal.widget.min.js?t=${Date.now()}}`;
        script.setAttribute('src', src);
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('data-ecal-apikey', apikey);
        script.setAttribute('data-ecal-spa', true);
        script.setAttribute('data-ecal-autoboot', false);
        const head = document.getElementsByTagName('head')[0];
        head.appendChild(script);
      },200);
    }
}

/*
* place this script on NextJS / ReactJS component that will render the sync button(s)
* call this function before the button is rendered.
*/
function renderSyncDisplay (apikey) {
    loadSyncDisplay(apikey);
    clearTimeout(window.syncDisplayTO);
    function bootSyncDisplay () {
      const ecalBtns = document.getElementsByClassName('ecal-sync-widget-button');
      if (window.EcalWidget && ecalBtns.length > 0 && apikey) {
        window.EcalWidget('boot', { apiKey: apikey });
        return;
      }
      window.syncDisplayTO = setTimeout(bootSyncDisplay, 500);
    }
    window.syncDisplayTO = setTimeout(bootSyncDisplay, 500);
}

b. Copy the code snippet below and name it as ecal-sync-button.component.html file.

<button class='ecal-sync-widget-button' [attr.data-ecal-widget-id]='widgetId'>
    Sync to Calendar
</button>

c. Copy the code snippet below and name it as ecal-sync-button.component.ts file.

import { OnInit, Component, Input } from '@angular/core';

declare function renderSyncDisplay(apikey:string): void;

@Component({
    selector:    'ecal-sycn-button',
    templateUrl: './ecal-sync-button.component.html',
    inputs: ['data-ecal-widget-id'],
})

class EcalSyncButton implements OnInit {
    @Input() widgetId:string = '';
    @Input() apikey:string = '';

    constructor() {}

    ngOnInit() {
        this.loadSyncDisplay(this.apikey);
    }

    renderSync(){
        renderSyncDisplay(this.apikey);
    }

}

export default EcalSyncButton;

3: Include ecal-sync-display-spa.js in angular.json script list

a. Open the angular.json file.
b. Find the property of projects.[app-name].architect.build.options.scripts.
c. Add src/ecal/ecal-sync-display-spa.js in the scripts array.

Example Code

{
  "projects": {
    "[APP-NAME]": {
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "scripts": [
              "src/ecal/ecal-sync-display-spa.js"
            ],
            ...
          },
        }
      }   
    }
  }
}

4: Add ECAL widget to module declarations

a. Open src/app/app.module.ts.
b. Import EcalSyncButton component to the module.

import EcalSyncButton from '../ecal/ecal-sync-button.component';

c. Add EcalSyncButton component in @NgModule declarations.

@NgModule({
  declarations: [
    ...
    EcalSyncButton,
    ...
  ],

5: Add ecal-sync-button component to the desired component or module

a. Open src/app/app.component.html or other angular component template file.
b. Finally, embed ecal-sync-button component with the API Key and Widget ID that you noted in step 1.

<ecal-sycn-button apikey="INSERT_YOUR_API_KEY" widgetId="INSERT_YOUR_WIDGET_ID" />

6: Using your own styling for the button (Optional)

By default, the HTML element you apply the ecal-sync-widget-button class to will be replaced with the default ECAL button styling. To override this, simply add the data-ecal-no-styling attribute to the HTML element.

    <ecal-sycn-button apikey="INSERT_YOUR_API_KEY" widgetId="INSERT_YOUR_WIDGET_ID" data-ecal-no-styling />

For further information on any of the above, refer to the detailed API reference or contact ECAL support using the chat in your ECAL Admin or support@ecal.com.