| css | ||
| js | ||
| example.html | ||
| README.md | ||
Show upcoming appointments from church.tools instance
Setup
- Upload
css/ct-events.cssandjs/ct-events.jsto your site - Download
mithril.min.jsfrom https://unpkg.com/browse/mithril@2.2.11/ (or a newer version, but tested with this) - Upload
mithril.min.jsto the same folder asct-events.js - Download
fontawesome-free-6.7.1-web.zipfrom https://fontawesome.com/download ("Free for Web"), tested with version 6.7.1 - Extract and upload
css/all.min.cssandwebfonts/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>:
<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>:
<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:
<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.