The bsport Calendar widget lets you display your class schedule directly on your website, so members can browse and book sessions without leaving your site. This guide walks through the display options available, to help you choose the layout and configuration that best suits your studio and your members' booking experience.
1. Display
This setting lets you choose how the calendar is laid out.
Weekly view, list mode — sessions are listed one below the other across the week.
Weekly view, card mode — sessions appear as cards. In responsive view you can choose to separate morning, afternoon and evening sessions. If you have a lot of free timeslots during the week, we recommend turning this setting off so that sessions display one below the other instead.
Responsive display — the calendar displays in card mode by default and switches to list mode on mobile.
Sessions of the day — only sessions for the current day are shown, with no headers and no filters.
2. Highlight
The highlight option lets you choose which piece of information appears first on each calendar card. For example, you can prioritise the activity name, the teacher, or the schedule time.
3. Filter options
Filters help members find the classes that match their preferences. You can filter the calendar by:
Teacher — show sessions with specific instructors.
Activity — filter by class type, for example Yoga, Pilates or HIIT.
Establishment / Location — view sessions at a specific studio or venue.
Level — filter by difficulty, for example Beginner, Intermediate or All levels.
Calendar filters on mobile
On mobile, the search bar and filters display horizontally, so members need to scroll sideways to see all of them. If you would rather change that, you can paste one of the snippets below into your Custom CSS area.
Show all filters — wraps the filters onto multiple lines so they are all visible at once:
@media (max-width: 500px) {
.bs-marketplace-filters__list {
flex-wrap: wrap;
justify-content: center;
}
}
Hide all filters — removes the filters on mobile entirely:
@media (max-width: 500px) {
.bs-marketplace-filters__list {
display: none;
}
}
Paste either snippet into the Custom CSS area for the calendar widget in your back office, under Settings > Widgets > CSS.
To hide one specific element rather than the whole filter bar, see our guide on removing an element using Custom CSS:
4. Integrate the widget on your website
Once you have selected your preferred configuration, scroll down and copy the widget code.
Click the copy icon.
Go to your website editor.
Add an HTML block or Code element, and paste the code.
Important: the configuration you set in the back office does not update automatically on your website. Each time you make a change, a new code is generated, and you will only see your changes once you have pasted the new code into your website.
If you run into problems, see our article on the most common widget problems. For any other questions, please contact your Account Manager.