Aufgabenstellung: Wir bieten generell die Möglichkeit, den Kurskalender von myGymPoint abzurufen und direkt in Ihre Webseite einzubinden. Ein Beispiel dazu finden Sie hier: https://crossfitplan.com/fitness-schedule/


Ausserdem können Sie an einer anderen Stelle die Kurse einblenden, die als nächstes stattfinden; ohne den kompletten Kalender zu zeigen. Darum geht es hier! Voraussetzung: Sie müssen auf dem Display einen Webseite ansteuern können, die die entsprechende Darstellung regelt.


Die Funktionalität ist nun in unserer externen API verfügbar. Dazu einfach einen "API Key" in den Studioeinstellungen erstellen. Auf der Webseite des Kursanbieters muss dann innerhalb des HTML Body Tags folgendes "script" Tag eingefügt werden:



<script>
    document.mgpBootstrap = function () {
        mgp.init({
            studioKey: 'F2tEnX1jQLF.....P2pdG5wSM'
        });
    };
    (function () {
        if (document.getElementById('mgp-js')) {
            return;
        }
        var scriptElement = document.createElement('script');
        scriptElement.id = 'mgp-js';
        scriptElement.src = 'http://connect.mygympoint.com/mgp.js';
        var first = document.getElementsByTagName('script')[0];
        first.parentNode.insertBefore(scriptElement, first);
    }());
</script>


Dabei muss natürlich der "studioKey" mit dem erzeugten API Key ersetzt werden (dieser hier wurde tw unkenntlich gemacht)


An die Stelle, an welcher später die Liste aktuellen Kurse angezeigt werden soll, muss folgendes Tag eingefügt werden:


<div class="mgp_calendar_today"></div>





Hier der Beispielcode zur Einbindung bzw. Anpassung: 


<style type="text/css">
div.mgp_calendar_today {
    font-size: 2.0vw;  /* Schriftgroesse - 2.0% der Seitenbreite */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin: 0;
}

h4.mgp_calendar_today__date_header {
    margin-bottom: 1em;
    font-weight: 700;
}

ul.mgp_caledar_today__group, ul.mgp_calendar_today__group {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin: 0;
}

li.mgp_calendar_today__item {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    border-top: 1px solid #eee;
}

li.mgp_calendar_today__item:first-child {
    border-top: 0;
}

li.mgp_calendar_today__item > a {
    margin: 0;
    padding-left: 1em;
}

li.mgp_calendar_today__item > a > span.mgp_calendar_today__item__time {
    left: -1em;
    font-weight: 700;
}

/* --- */

#content div.row {
    display: flex;
    flex-direction: row;
}

#content div.row div.col-sm-6,
#content div.row div.col-md-6,
#content div.row div.col-lg-6,
#content div.row div.ce-layout0 {
    display: flex;
    flex-direction: column;
}

#content div.row div.ce-layout0 {
    flex-grow: 1;
}
</style>
JavaScript