Complete example

A complete event calendar page: the events of an Infocenter View with a date range filter, opening in the event detail view. Replace YOUR_SUBSCRIPTION_KEY, YOUR_PROJECT and YOUR_VIEW_ID with your values. See the overview for where to get them.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Events</title>
    <style>
        .event-calendar {
            max-width: 1280px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1>Events</h1>

    <div class="event-calendar">
        <ds-landing
            language="en"
            schedule-filter="true"
            styles='{"accent-100": "#0057b8", "accent-dark": "#003f86"}'
            config='{
                "infocenterUrl": "https://api.discover.swiss/info/v2",
                "subscriptionKey": "YOUR_SUBSCRIPTION_KEY",
                "projects": ["YOUR_PROJECT"],
                "viewId": "YOUR_VIEW_ID",
                "resultsPerPage": 12,
                "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>
    </div>

    <script src="https://cdn.discover.swiss/webcomponents/general/ng-polyfills.js"></script>
    <script src="https://cdn.discover.swiss/webcomponents/general/ng-runtime.js"></script>
    <script src="https://cdn.discover.swiss/webcomponents/general/wc-landing-1.js"></script>
    <script src="https://cdn.discover.swiss/webcomponents/general/wc-event-detail-page-1.js"></script>
    <script>
        const landing = document.querySelector('ds-landing');

        landing.addEventListener('dsItemClicked', (event) => {
            // e.g. track which events are opened
            console.log('Event opened', event.detail.itemId);
        });

        landing.addEventListener('searchErrorEvent', (event) => {
            console.warn('Events could not be loaded', event.detail.status);
        });
    </script>
</body>
</html>

Variations

Without a view. Remove viewId and define the content in the component:

{
    "infocenterUrl": "https://api.discover.swiss/info/v2",
    "subscriptionKey": "YOUR_SUBSCRIPTION_KEY",
    "projects": ["YOUR_PROJECT"],
    "filterByTypes": ["Event"],
    "showScheduleFilter": true,
    "facets": [
        {"name": "categoryTree", "scope": "all", "count": 1000},
        {"name": "address/addressLocality", "scope": "all", "count": 1000}
    ]
}

Without the detail view. Remove detailView and the <ds-event-detail-page> element. A click on a card then opens the event's link in a new tab, see Card links.

Calendar of one region. Link to the page with a containedInPlace parameter to preselect places, see Preselect places by url.

Test environment. Use https://api.discover.swiss/test/info/v2 as infocenterUrl and load the scripts from https://cdn-test.discover.swiss/webcomponents/general/.