In AngularJS

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 2 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 and update the API Key here that you noted in step 1.

/*
 * 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.html file and update the property data-ecal-widget-id with the Widget ID that you noted in step 1.

<button class='ecal-sync-widget-button' data-ecal-widget-id='INSERT_YOUR_WIDGET_ID'>
    Sync to Calendar
</button>
{{ renderSyncDisplay(API_KEY) }}

3: Configure ECAL widget

a. Import ecal.js to the html head tag

<script src="ecal-sync-display-spa.js"></script>

b. Place ecal-sync.html to component directory or copy it as an Angular-JS Component.

4: Attach renderEcalSyncButton() function

Finally, attach renderEcalSyncButton() function to the controller’s $scope variable in the app or view controller function declaration.

app.controller('appController', function ($scope) {
    ...
    $scope.renderSyncDisplay = renderSyncDisplay;
    ...
});

5: 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.

  <button class='ecal-sync-widget-button' data-ecal-widget-id='INSERT_YOUR_WIDGET_ID' data-ecal-no-styling>
    Sync to Calendar
  </button>

6: Complete Angular JS Example in a Basic Page

<!DOCTYPE html>
<html ng-app="syndDisplay">
<head>
    <title>Getting Started with AngularJS 1.x</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="//sync.ecal.com/js/ecal-sync-display-spa.js"></script>
    <script>
        angular.module('syndDisplay', [])
        .controller('syncDisplayController', ['$scope', function($scope) {
            $scope.renderSyncDisplay = renderSyncDisplay;
        }]);
    </script>
</head>
<body ng-controller="syncDisplayController">

    <button class="ecal-sync-widget-button " data-ecal-widget-id="67f9e9647f847800089414d7" > Sync to Calendar </button>
    {{ renderSyncDisplay('HOPTGTOFd8VvGniFyTmFWdToYlARFcbihJs5BCE620b90007ff') }}

</body>
</html>

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.