Event detail¶

The event detail web component <ds-event-detail-page> shows one event on your website:

images, the event status (e.g. canceled or postponed) and a description,
all dates and opening hours,
location with map, route planning and public transport connection,
prices, videos, language, organizer and contact,
booking and ticket links,
more events in the same region.

It loads the event from the Infocenter API in the language of the page.

You can use it in two ways:

Inside the landing component (recommended): a click on an event card shows the event in place of the list.
On a page of its own: e.g. https://www.example.com/event?eventId=….

Load the script¶

Load the script in addition to the landing component scripts. ng-polyfills.js is only needed once per page.

<script src="https://cdn.discover.swiss/webcomponents/general/ng-polyfills.js"></script>
<script src="https://cdn.discover.swiss/webcomponents/general/wc-event-detail-page-1.js"></script>

For the test environment, use https://cdn-test.discover.swiss/webcomponents/general/ instead.

Inside the landing component¶

Put <ds-event-detail-page> inside <ds-landing> and add detailView to the landing configuration:

<ds-landing
    language="en"
    config='{
        "infocenterUrl": "https://api.discover.swiss/info/v2",
        "subscriptionKey": "YOUR_SUBSCRIPTION_KEY",
        "projects": ["YOUR_PROJECT"],
        "viewId": "YOUR_VIEW_ID",
        "detailView": {"types": ["Event"]}
    }'>
    <ds-event-detail-page
        language="en"
        config='{
            "infocenterUrl": "https://api.discover.swiss/info/v2",
            "subscriptionKey": "YOUR_SUBSCRIPTION_KEY",
            "project": "YOUR_PROJECT"
        }'>
    </ds-event-detail-page>
</ds-landing>

When the visitor clicks an event card:

The list is replaced by the event detail, with a Back to overview button above it.
The event id is added to the page url, e.g. https://www.example.com/events?eventId=…. The url can be bookmarked and shared: opening it shows the event directly.
The browser's back button, or Back to overview, returns to the list at the same scroll position, with the filters the visitor had selected.

The event title on the card is a regular link to this url, so Ctrl/Cmd-click or a middle click on it opens the event in a new tab. The landing component still dispatches dsItemClicked, e.g. for your analytics. Your website doesn't need any routing of its own.

`detailView`¶

Property	Type	Default	Description
`types`	string[]	all types	Item types opened in the detail view, e.g. `["Event"]`. Cards of other types keep their link.
`queryParam`	string	`eventId`	Name of the page url parameter that holds the event id.
`idConfigProperty`	string	`eventId`	Property of the detail component's `config` that receives the event id.

Set detailView to {} to open all items in the detail view. Without detailView, cards open the event's link in a new tab.

On a page of its own¶

Add the component to your event page. It reads the event id from the page url, ?eventId=… by default:

<ds-event-detail-page
    language="en"
    config='{
        "infocenterUrl": "https://api.discover.swiss/info/v2",
        "subscriptionKey": "YOUR_SUBSCRIPTION_KEY",
        "project": "YOUR_PROJECT",
        "breadcrumbs": [
            {"label": {"de": "Veranstaltungen", "en": "Events"}, "url": "/events"}
        ]
    }'>
</ds-event-detail-page>

To show one fixed event, set eventId in config instead. An id in the page url takes precedence.

To link from your own list to this page, listen to the dsItemClicked event of the landing component, see Events.

Configuration¶

Attributes¶

Attribute	Type	Description
`config`	JSON / object	Component configuration, see below. Required.
`language`	`en` \| `de`	Language of the component and of the event data. Without it, the browser language is used if it is English or German, otherwise German.
`styles`	JSON / object	CSS variable overrides, as in the landing component.
`view-height`	number (px)	Fixed height. By default the component takes the height of its parent element.
`view-width`	number (px)	Fixed width. By default the component takes the width of its parent element.

Config¶

Property	Type	Default	Description
`infocenterUrl`	string	-	Base URL of the Infocenter API, see Environments. Required.
`subscriptionKey`	string	-	Your API subscription key. Required.
`project`	string	-	Your Infocenter project.
`eventId`	string	-	Event to show when the page url contains none.
`eventIdQueryParam`	string	`eventId`	Name of the page url parameter that holds the event id. Must match `detailView.queryParam` of the landing component.
`breadcrumbs`	Breadcrumb[]	-	Breadcrumb items shown above the event. The event name is added as the last item. `label` is a text or an object with a text per language, `url` is optional.
`fontFamily`	string	-	Name of a custom font. Only applied together with `fontUrl`.
`fontUrl`	string	-	URL of a `woff2` font file for `fontFamily`.

Errors¶

If infocenterUrl or the event id is missing, the component shows which setting is missing. If the event can't be loaded, e.g. because the id is wrong or the event was deleted, it shows "The event could not be loaded."

Data¶

The component loads the event with GET {infocenterUrl}/events/{eventId} and the events in the same region with the Infocenter search. See the Event schema for the fields of an event. If you build your own detail page instead, load the event the same way.