54 lines
2.0 KiB
Markdown
54 lines
2.0 KiB
Markdown
|
# Show upcoming appointments from church.tools instance
|
||
|
|
|
||
|
|
## Setup
|
||
|
|
|
||
|
|
* Upload `css/ct-events.css` and `js/ct-events.js` to your site
|
||
|
|
* Download `mithril.min.js` from https://unpkg.com/browse/mithril@2.2.11/ (or a newer version, but tested with this)
|
||
|
|
* Upload `mithril.min.js` to the same folder as `ct-events.js`
|
||
|
|
* Download `fontawesome-free-6.7.1-web.zip` from https://fontawesome.com/download ("Free for Web"), tested with version 6.7.1
|
||
|
|
* Extract and upload `css/all.min.css` and `webfonts/fa-solid-900*`; the CSS expects the font to be in `../webfonts/`, so keep the folder hierarchy.
|
||
|
|
* Add the following to your site template header (adapt paths to your local setup), i.e. in `<head>...</head>`:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<link rel="stylesheet" type="text/css" href="/css/ct-events.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="/css/all.min.css">
|
||
|
|
<link rel="modulepreload" href="/js/ct-events.js" />
|
||
|
|
<link rel="modulepreload" href="/js/mithril.min.js" />
|
||
|
|
```
|
||
|
|
|
||
|
|
* Add the following to your site template footer (adapt paths to your local setup), i.e. at the end of `<body>...</body>`:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<script type="module">
|
||
|
|
import { load_all_events } from "/js/ct-events.js";
|
||
|
|
await load_all_events({
|
||
|
|
// site default options
|
||
|
|
instance: "https://your-church-tools-instance",
|
||
|
|
default_image: "/img/welcome.jpg",
|
||
|
|
default_image_mobile: "/img/welcome-mobile.jpg",
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Allow church-tools API CORS from your site
|
||
|
|
|
||
|
|
Add your site (`https://your-site`) to `Access-Control-Allow-Origins` sent by your church-tool instance, see: <https://churchtools.academy/de/help/system-einstellungen/api/0-cors/>
|
||
|
|
|
||
|
|
## Add calendar events
|
||
|
|
|
||
|
|
Add this snippet to your page:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<div
|
||
|
|
class="cte-events"
|
||
|
|
style="max-width: 1100px;"
|
||
|
|
data-cte-calendar-regex="Erwachsene|Chor"
|
||
|
|
data-cte-event-regex="Ausrufezeichen|Chor AZ"
|
||
|
|
data-cte-limit="5"
|
||
|
|
></div>
|
||
|
|
```
|
||
|
|
|
||
|
|
The class `cte-events` triggers the javascript; options can be overridden and set via `data-cte-*` attributes.
|
||
|
|
|
||
|
|
You can add multiple snippets on a page with different settings.
|