Gymkloud Kalender Web-Komponente

Funktionen

Anzeige von Kursevents in einer Wochenansicht
Filterung nach Kursgruppen
Anpassbare Darstellung
Einfache Integration in jede Website

Installation

Fügen Sie die folgenden Skripte in Ihre HTML-Datei ein:

<!-- FullCalendar -->
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>

<!-- GymKloud Kalender Komponente -->
<script src="https://gymkloud-calendar.pages.dev/calendar-element.js"></script>

Verwendung

Fügen Sie die Kalender-Komponente in Ihr HTML ein:

<gymkloud-calendar 
    gym-shortname="gym-shortname">
</gymkloud-calendar>

Komplettes Beispiel

<!DOCTYPE html>
<html>
<head>
    <title>Calendar Example</title>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
    <script src="https://gymkloud-calendar.pages.dev/calendar-element.js"></script>
</head>
<body>
    <gymkloud-calendar 
        gym-shortname="trojan_performance"
        default-groups="Kurse">
    </gymkloud-calendar>
</body>
</html>

Styling

Die Komponente verwendet Shadow DOM für die Style-Kapselung. Sie können das Erscheinungsbild durch Anpassung der CSS-Variablen oder durch Hinzufügen eigener Styles auf Ihrer Seite anpassen.

Konfiguration

Attribute

gym-shortname: Der Kurzname Ihres Studios (erforderlich)
api-url: API-Basis-URL (optional, Standard ist https://gymkloud.com)
default-groups: Komma-getrennte Liste von Kursgruppen-Namen, die standardmäßig ausgewählt sein sollen (optional, Standard ist alle Gruppen)

Browser-Unterstützung

Die Komponente funktioniert in allen modernen Browsern, die Web Components unterstützen:

Chrome/Edge (neueste Version)
Firefox (neueste Version)
Safari (neueste Version)

Abhängigkeiten

FullCalendar v6.1.15
Web Components (Custom Elements v1)