Event Display

In this Article:

  1. API Method
  2. URL Query Method

Methods to Embed Event Display Widget

API Method

  • This method allows you to embed an event display into a webpage. For instructions on embedding an event display widget, please refer to this link.

Example

  <script>
    (function(){
      var s = document.createElement('script');
      s.src = 'https://display.ecal.net/v2/widget.js'+ '?t=' + Date.now();
      document.getElementsByTagName('head')[0].appendChild(s);
    })();
  </script>

<div
  class="ecal-sync-widget-event"
  data-ecal-apikey="INSERT_YOUR_API_KEY"
  data-ecal-widget-id="INSERT_YOUR_WIDGET_ID"
  data-ecal-widget-type="calendar"
  data-ecal-widget-view="list"
  data-ecal-event-gradient="false"
>
</div>

API Parameters

Field Type Required Valid values Description
data-ecal-widget-type string YES calendar, page, carousel, column Show how the widget displays on your webpage. By default, the type is calendar, which shows all the events in a calendar view.
data-ecal-apikey string YES The data-ecal-apikey is provided by ECAL and is found in the Publisher Admin Portal.
data-ecal-widget-id string YES The data-ecal-widget-id is provided by ECAL and is found in the Publisher Admin Portal.
data-ecal-widget-view string NO month, week, day, list Change the default view of the calendar widget type on loading by month, week, day, or list. By default, the view is set to month.
Note: This feature is only available to the Calendar widget type.
data-ecal-event-gradient bool NO true, false All banner images are covered with a gradient effect, which is in the colour of the header background of the display. By default, the data-ecal-event-gradient is true, and when data-ecal-event-gradient=false, the gradient effect is disabled, and the colour opacity is reduced to 10%.
The gradient colour can be customised via Publisher Admin > Event displays > Design > Header > Background colour.
Note: Calendar type doesn’t support this parameter as there is no gradient effect on banner images.

URL Query Method

  • Share the link via email, or social media post. When users click the link, the ECAL display will open.

Example

  https://display.ecal.net/widget.html?widgetType=calendar&apiKey=INSERT_YOUR_API_KEY&widgetId=INSERT_YOUR_WIDGET_ID&view=list&eventGradient=false

Query Parameters

Field Type Required Valid values Description
widgetType string YES calendar, page, carousel, column Show how the widget displays on your webpage. By default, the type is calendar, which shows all the events in a calendar view.
apiKey string YES The apiKey is provided by ECAL and is found in the Publisher Admin Portal.
widgetId string YES The widgetIdis provided by ECAL and is found in the Publisher Admin Portal.
view string NO month, week, day, list Change the default view of the calendar widget type on loading by month, week, day, or list. By default, the view is set to month.
Note: This feature is only available to the Calendar widget type.
eventGradient bool NO true, false All banner images are covered with a gradient effect, which is in the colour of the header background of the display. By default, the eventGradient is true, and when eventGradient=false, the gradient effect is disabled, and the colour opacity is reduced to 10%.
The gradient colour can be customised via Publisher Admin > Event displays > Design > Header > Background colour.
Note: Calendar type doesn’t support this parameter as there is no gradient effect on banner images.