Styling the Events Widget

Part Theming

Specific parts of the Events Widget can have their default styles overridden through the ::part pseudo-element.

There are four main styling blocks:

• The widget's month and date selectors:
  • date__month: the text for the month/year OR the selected date range
  • date__btn-year: the year selector button (desktop only)
  • date__btn-month: the month selector button (desktop only)
  • date__btn-month-mobile: the month selector button (mobile only)
  • date__txt-month-mobile-month: the text for the month (mobile only)
  • date__txt-month-mobile-count: the text for the event count (mobile only)
  • date__container-month-year-mobile: the container for the month and year selector (mobile only)
  • date__btn-select-dates: the select dates / clear dates button
• The widget's tag filtering carousel:
  • filter__btn-tag: the selectable filter buttons in the filter carousel
  • filter__btn-tag-selected: the selected filter button
  • filter__btn-prev, filter__btn-next: arrow buttons
  • filter__gradient-left, filter__gradient-right: side gradients
• The widget's events (featured and recurring):
  • events__container: container for the events sections
  • events__container-featured, events__container-recurring: respective containers
  • events__heading: the heading
  • events__btn-prev, events__btn-next: arrows for pagination
  • events__featured-error, events__featured-no-data, events__recurring-no-data: error/no data containers
  • card__skeleton, card__surface, card__body, etc.: card structure elements
  • featured__fader-left, featured__fader-right: mobile-only faders
  • recurring__*: elements for recurring event layout
• The widget's details side pane:
  • details__main, details__title, details__presentedBy, details__venue, etc.

Define your styles like this:

<code>whereabouts-events-widget::part(-part-name-here-) {
    background-color: red;
    ...
}

Global Theming

You may override the default fonts in the widget by passing in a font-family-override prop. If you are using an external font, make sure it is loaded on your website.

<code><whereabouts-events-widget
  ...
  font-family-override="Comic Sans MS"
  ...
></whereabouts-events-widget>