@geocity/agenda-embed
v1.3.1
Published
Web component to browse, filter and search events; including a detail view.
Downloads
224
Readme
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