Gå til indhold
Dansk
Gå til yogo.dk
  • Der er ingen forslag, da søgefeltet er tomt.

Vis kalenderwidget med udvalgte klassetyper og valgfri startdato

Vælg med få klik om skemaet på jeres hjemmeside skal vise alle klasser eller kun udvalgte klassetyper samt opret startdato for visning

Vis kun udvalgte klassetyper i skema

  1. Gå til din YOGO admin --> 'Klassetyper'

  2. Tryk ind på den klassetype du ønsker skal vises i skemaet

  3. Kopier id'et til klassetypen i url-baren (se nedenstående animation)

    Skærmoptagelse-2022-06-21-kl.-14.30.59

Gå ind på din hjemmeside og find den side, hvor skemaet skal vises.

Wordpress:

For at vise hele skemaet, brug følgende kode:

[yogo-calendar]

Vis kun udvalgte klasser:

[yogo-calendar class-type="xxxx"]

Det ID du netop har kopieret erstatter 'xxxx'. Hvis du ønsker at vise mere end en klassetype, separer blot id'er med et komma.

Andre hjemmesidetyper, f.eks. Squarespace, Wix etc.

For at vise hele skemaet, brug følgende kode:

<div class="yogo-calendar"></div>

Vis kun udvalgte klasser:

<div class="yogo-calendar" data-class-types="xxxx"></div>
 

Vis skema fra valgfri startdato

Hvis man ønsker at skema skal vises fra en bestemt dato, kan man indsætte følgende kode. Når startdatoen er overskredet fortsætter visning blot fra dags dato.

 

Wordpress:

[yogo-calendar start-date="29/8-2022"]
 

Andre hjemmesidetyper, f.eks. Squarespace, Wix etc.

<div class="yogo-calendar" data-start-date="29/9-2022"></div>

Ovenstående kan også kombineres, så det både er udvalgte klassetyper og valgfri startdato. I så fald vil det se sådan ud:

Wordpress:

[yogo-calendar class-types="xxxx" start-date="29/8-2022"]

Andre hjemmesidetyper, f.eks. Squarespace, Wix etc.

<div class="yogo-calendar" data-class-types="xxxx" data-start-date="29/9-2022"></div>

Vis kun udvalgte undervisere i skemaet

Hvis du vil have skemaet til at vise en bestemt underviser (eller flere), kan du bruge følgende:

Andre hjemmesidetyper (Squarespace, Wix osv.)

Vis én underviser:

<div class="yogo-calendar" data-teacher="1234"></div>

Vis flere undervisere

<div class="yogo-calendar" data-teachers="1234, 1234, 1234"></div>

1234 er underviserens ID.

Vis kun udvalgte afdelinger (branches) i skemaet

Hvis du har flere lokationer slået til i YOGO og vil vise skemaet for én bestemt afdeling, kan du bruge:

WordPress

[yogo-calendar branch="XXXXX"]

XXXXX er afdelingens navn, som du finder i:
YOGO Admin → Indstillinger / Settings → Branches

Andre hjemmesidetyper (Squarespace, Wix osv.)

<div class="yogo-calendar" data-branch="XXXX"></div>  
XXXXX er afdelingens navn, som du finder i:

YOGO Admin → Indstillinger / Settings → Branches

Vis skemaet med låst visning af “i dag” (kun dagens skema)

Koden herunder sikrer, at widgetten kun viser dagens skema. På desktop vises kalenderen typisk horisontalt, og på mobil vertikalt – automatisk tilpasset skærmstørrelsen.

WordPress

<div class="one-day-calendar">
    [yogo-calendar]
</div>

Andre hjemmesidetyper (Squarespace, Wix osv.)

 <div class="one-day-calendar">
    <div class="yogo-calendar"></div>
</div>

Nedenfor er nogle CSS-eksempler, du kan bruge til at ændre udseendet (layout, farver, spacing osv.). Kopiér og indsæt i din hjemmesides “Custom CSS”:

@media screen and (min-width: 1025px) {
    .yogo-calendar-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    ul[data-v-5633cc58] {
        display: flex;
        padding-top: 10px !important;
    }
}
.yogo-widget .theme--frame-box {
    background-color: unset;
}
.one-day-calendar .events-group.yogo-tac-md,
.header__logo--client {
    display: none;
}
.one-day-calendar .events-group.yogo-tac-md.current-day {
    display: block !important;
    width: 100% !important;
}
.one-day-calendar .space--between.fc-sm.mb-2,
.one-day-calendar .flex--row-reverse.space--between.flex--start {
    display: none !important;
}
.class-item.yogo-tac-md {
    flex: 1 1 calc(20% - 10px);
    margin-bottom: 0 !important;
    background-color: white;
}

Hvis du vil vide hvad hvert stykke kode gør, så kommer her en kort forklaring:

1) Tilpasninger til store skærme (≥1025px)

 
@media screen and (min-width: 1025px) {
    .yogo-calendar-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    ul[data-v-5633cc58] {
        display: flex;
        padding-top: 10px !important;
    }
}

På store skærme:

  • vises .yogo-calendar-list som et fleksibelt grid

  • elementer står ved siden af hinanden og kan “wrappe”

  • der er 10px afstand mellem elementer

Resultat: Mere luft og pænere desktop-layout.

2) Fjern baggrund på widget-rammen

.yogo-widget .theme--frame-box {
    background-color: unset;
}

Fjerner baggrundsfarven fra widget-rammen.

Resultat: Den bliver gennemsigtig og følger sidens baggrund.

3) Skjul elementer i “one-day”-visning

.one-day-calendar .events-group.yogo-tac-md,
.header__logo--client {
    display: none;
}

Skjuler:

  • de normale event-grupper i one-day mode

  • kundelogoet i widgetten

Resultat: Et renere kalender-look.

4) Vis kun dagens event (fuld bredde)

.one-day-calendar .events-group.yogo-tac-md.current-day {
    display: block !important;
    width: 100% !important;
}

Gør dagens gruppe synlig igen og giver den fuld bredde.

Resultat: Kalenderen viser kun i dag – og udnytter pladsen.

5) Fjern unødvendige bars/filtre/overskrifter

.one-day-calendar .space--between.fc-sm.mb-2,
.one-day-calendar .flex--row-reverse.space--between.flex--start {
    display: none !important;
}

Skjuler typisk top-bars, filtre og navigation (kan variere).

6) Gør hvert hold til et “kort” i et grid

.class-item.yogo-tac-md {
    flex: 1 1 calc(20% - 10px);
    margin-bottom: 0 !important;
    background-color: white;
}

Hvert element:

  • fylder ca. 20% (minus 10px) → typisk ~5 pr. række

  • har hvid baggrund

  • ingen bund-margin

Resultat: Et rent “card grid”-layout.