Embedding the Events Widget

Setting the language

The default language is English ( en). You can set the widget to use French (fr) or Spanish (es)

<whereabouts-events-widget
  ...
  lang="en | es | fr"
  ...
></whereabouts-events-widget>

Slideout panel and/or linking to a profile page

If you want to show the event details on a new page, provide a URL template. {EVENT_NAME} and {EVENT_ID} will be replaced. Further, you can choose to navigate to that link when you click the card OR from a button within the details modal. The default is slideout.

<whereabouts-events-widget
  ...
  event-details-link="https://www.example.com/{EVENT_NAME}/{EVENT_ID}"
  event-details-display-mode="link | slideout"
  ...
></whereabouts-events-widget>

Setting the display mode

The default mode is grid. You can set the widget to grid or carousel

<whereabouts-events-widget
  ...
  widget-display-mode="grid | carousel"
  ...
></whereabouts-events-widget>

Further config for carousel mode

You can choose to hide the filters, scrollbar; or load only the next n months of data (which hides the date selectors); or add tag filters to the event query.

• hide-filters default is false
• next-n-months default is 0
• hide-carousel-scrollbar default is false
• apply-filters default is an empty array
• more-events-link: The URL to navigate to to view more events (such as /events)
• carousel-no-events-text: The text to override the default if there are no events

<whereabouts-events-widget
  ...
  hide-filters="true | false"
  next-n-months="0 (default) to 12"
  hide-carousel-scrollbar="true | false"
  apply-filters="comma separated tag IDs"
  more-events-link="https://www.example.com"
  carousel-no-events-text="Some text to display"
  ...
></whereabouts-events-widget>

New CSS parts

• carousel__container-no-events: skeleton container when there are no events
• carousel__no-events-text: the text container when there are no events
• widget__btn-more-events: the more events button (applies only when a more events link is provided)

New attribute for the widget embed in case you don't like the default no events text (Looks like there's nothing to see here at the moment!)

<code><whereabouts-events-widget   ...   carousel-no-events-text="Some text to display"   ... ></whereabouts-events-widget>

Detecting if a carousel will return no results

Carousels are designed for use with small batches of filtered events. If all the events have passed, it might be preferable to hide the carousel entirely on your page. You can achieve this on your site by listening for custom events and then adding code that will hide your carousel entirely if no events are returned.

When in carousel mode, you can listen for when the events are loaded in one of three ways. In each case, the CustomEvent will have the following signature

{
  details: {
    hasEvents: boolean;
    eventCount: number;
  }
}

Method one (using a globally available function)

<script type="text/javascript">
  function handleCarouselEventsLoaded(e) {
    console.log(e);
  }
</script>
<whereabouts-events-widget
  ...
  carouselEventsLoaded="handleCarouselEventsLoaded"
  ...
></whereabouts-events-widget>

OR Method two (adding a method directly to the element with JS)

<script type="text/javascript">
  const widget = document.querySelector("whereabouts-events-widget");
  widget.carouselEventsLoaded = e => console.log(e);
</script>
<whereabouts-events-widget></whereabouts-events-widget>

OR Method three (adding an event listener to the element with JS)

<script type="text/javascript">
  const widget = document.querySelector("whereabouts-events-widget");
  widget.addEventListener("carouselEventsLoaded", e => console.log(e));
</script>
<whereabouts-events-widget></whereabouts-events-widget>