With just a few clicks, choose how to display the schedule on your website: show all classes or only selected types (with an optional start date), display selected teachers, and display selected branches.
Display only selected class types in the schedule
-
Go to your YOGO admin → 'Class Types'
-
Click on the class type you want to display in the schedule.
-
Copy the class type ID from the URL bar (see the animation below).
Go to your website and find the page where the schedule should be displayed.
Wordpress
To display the entire schedule, use the following code:
[yogo-calendar]
Display only selected classes:
[yogo-calendar class-types="xxxx"]
The ID you just copied replaces 'xxxx'. If you want to display more than one class type, simply separate the IDs with a comma.
Other website types, e.g., Squarespace, Wix, etc.
To display the full schedule, use the following code:
<div class="yogo-calendar"></div>
Display only selected classes:
<div class="yogo-calendar" data-class-types="xxxx"></div>
Display schedule from an optional start date.
If you want the schedule to be displayed from a specific date, you can insert the following code. When the start date has passed, it will simply continue to display from the current date.
Wordpress:
[yogo-calendar start-date="29/8-2022"]
Other website types, such as Squarespace, Wix, etc.
<div class="yogo-calendar" data-start-date="29/9-2022"></div>
The above can also be combined to display selected class types and an optional start date. In that case, it will look like this:
Wordpress:
[yogo-calendar class-types="xxxx" start-date="29/8-2022"]
Other website types, such as Squarespace, Wix, etc.
<div class="yogo-calendar" data-class-types="xxxx" data-start-date="29/9-2022"></div>
Display only selected teachers in the schedule
If you want the schedule to display a specific teacher or teachers, you can insert the following code:
Wordpress
Other website types, such as Squarespace, Wix, etc.
<div class="yogo-calendar" data-teacher="1234"></div>
If you want the schedule to display more than one teacher
<div class="yogo-calendar" data-teachers="1234, 1234, 1234"></div>
1234 is the teacher ID
Display only selected branches in the schedule
If you have more than one location enabled on YOGO and want the schedule to display a specific branch, you can use the following code:
Wordpress
[yogo-calendar branch="XXXXX"]
XXXXX is the branch name, which you can find in YOGO Admin -> Settings -> Branches.
Other website types, such as Squarespace, Wix, etc.
<div class="yogo-calendar" data-branch="XXXX"></div>
XXXXX is the branch name, which you can find in YOGO Admin -> Settings -> Branches.
Display the schedule with a locked view of the current day.
The code below ensures that the YOGO widget displays only the schedule for the current day. This way, when students access it on desktop, the calendar appears horizontally, while on mobile it shows vertically, automatically adapting to the screen size. It’s a practical, elegant way to show just the current day.
Wordpress
<div class="one-day-calendar">
[yogo-calendar]
</div>
Other types of websites (Squarespace, Wix, etc.)
<div class="one-day-calendar">
<div class="yogo-calendar"></div>
</div>
Below are some CSS code examples — styles you can use to change the appearance of YOGO elements (layout, colors, spacing, etc.) to make the widget look more appealing. Just copy and paste these into your website builder’s custom CSS area 😊
@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;
}
If you’d like to know what each piece of code does, here’s a breakdown:
1. Adjustments for larger screens (≥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;
}
}
On large screens, this block:
-
Displays the
.yogo-calendar-listas a flexible grid -
Places items side by side
-
Allows them to wrap onto multiple lines
-
Adds a 10px gap between them
Result: A cleaner, more spacious layout on desktop.
2. Remove the background from a widget element
.yogo-widget .theme--frame-box {
background-color: unset;
}
This removes the background color from the main YOGO widget frame.
Result: It becomes transparent, showing the page’s natural background.
3. Hide certain elements from the one-day calendar
.one-day-calendar .events-group.yogo-tac-md,
.header__logo--client {
display: none;
}
This hides:
-
The regular event groups in one-day calendar mode
-
The client logo inside the widget
Result: A cleaner calendar without these elements.
4. Display only the current day's event (full width)
.one-day-calendar .events-group.yogo-tac-md.current-day {
display: block !important;
width: 100% !important;
}
The current day’s event group becomes visible again and expands to 100% width.
Result: The calendar shows only today’s schedule, taking up the full available width.
5. Remove unnecessary bars, filters, or headers
.one-day-calendar .space--between.fc-sm.mb-2,
.one-day-calendar .flex--row-reverse.space--between.flex--start {
display: none !important;
}
-
This typically hides:
-
Top bars
-
Filters
-
Navigation elements
(Varies depending on the widget)
-
6. Turn each class into a flexible grid “card”
.class-item.yogo-tac-md {
flex: 1 1 calc(20% - 10px);
margin-bottom: 0 !important;
background-color: white;
}
Each class-item:
-
Takes up 20% of the width minus 10px
→ Result: 5 items per row -
Has a white background
-
Has no bottom margin
Result: The calendar looks like a clean card-style grid.