@geocity/agenda-embed

Agenda Embed

Web component to browse, filter and search events; including a detail view.

Installation

A. By downloading

You can download the latest version on Gitlab to serve it from your own server.

B. Using a third-party CDN

You can directly hotlink the JavaScript file mentioned below through a CDN like Unpkg or JSDelivr:

<script type="module" src="https://unpkg.com/@geocity/agenda-embed"></script>

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@geocity/agenda-embed"
></script>

C. Using a package manager

The widget is available as a package that you can install using your favorite Node package manager; example using npm:

npm install @geocity/agenda-embed

To define the custom agenda-embed element, you must import the package somewhere in your code:

import '@geocity/agenda-embed';

Usage

Embed the web component directly in an HTML page:

<!-- Customize the style -->
<style>
  agenda-embed {
    --agd-color-primary: #008c6f;
    --agd-color-accent: #005d95;
    --agd-headings-font-family: 'Playfair Display', serif;
    --agd-headings-font-weight: 500;
    /* ... */
  }
</style>

<!-- Render the component -->
<agenda-embed></agenda-embed>

<!-- Initialize the component -->
<script type="module" src="/path/to/agenda-embed.js"></script>

Filter events displayed by domain

You can globally restrict the widget to events of a given domain by using the domain attribute on the component:

<agenda-embed domain="sport"></agenda-embed>

A domain must be specified for the filters dropdown to be displayed.

To display events from all domains, don’t specify this attribute.

Customize the API target

Specify the api-base-url attribute to use a different API target:

<agenda-embed api-base-url="https://www.yourdomain.ch/api"></agenda-embed>

This parameter is optional, https://geocity.ch/rest is the default.

The end-points called by the widget are:

• GET /agenda for the list of events
• GET /agenda/:id for the event details