Um Ihnen ein Beispiel zu liefern für die Anpassung Ihres Layouts für die eigene Webseite, möchten wir einfach den Code für unser Demostudio crossfitplan.com zeigen. Hier haben wir einfach sichergestellt, dass


  • Kurse in der Vergangenheit "grau" hinterlegt sind und
  • Kurse, die noch bevorstehen, "gelb" hinterlegt sind


Und hier ist unser Codebeispiel (am besten mit einer Entwicklungsumgebung betrachten wie sublime text oder Visual Code Studio):


/*
 * (1) Kurs
 *     Course entity
 */

div.mgp_calendar__course {
    background-color: #F8E237;
}

div.mgp_calendar__course a {
    color: black;
}


/*
 * (2) vergangener Kurs
 *     old courses
 */

div.mgp_calendar__course--disabled {
    background-color: #aaa15c;
}

div.mgp_calendar__course--disabled a {
    color: #aaaaaa;
}


/*
 * (3) Kurs (Hover)
 *     Course (on hover)
 */

div.mgp_calendar__course:hover {
    background-color: #39b3d7;
}

div.mgp_calendar__course:hover a {
    background-color: #39b3d7;
    color: white;
}


/*
 * (4) Kursdetails  - Hintergrundfarbe
 *     Course details - background
 */

div.mgp_calendar__popup {
    background-color: white;
}

.mgp_calendar__popup__arrow::after {
    border-top-color: white;
}


/*
 * (5) Kursdetails - Titel
 *     Course details - title
 */

div.mgp_calendar__popup h3 {
    background-color: #39b3d7;
    color: white;
}


/*
 * (6) Kursdetails - Kapazität
 *     Course details - capacity
 */

.mgp_calendar__popup__capacity {
    background-color: #39b3d7;
    color: white;
    border-color: #39b3d7;

Viel Erfolg und Vergnügen beim Anpassen nach Ihren Bedürfnissen