ℹ️ This article will be updated as we release more improvements over the coming months.
The bsport Calendar widget lets you display your class schedule directly on your website, so clients can browse and book classes without leaving your site. You'll find these options in Settings > Widgets, in step 2 · Setup of the Configure tab, once you've selected the Calendar widget.
1. Display
Choose how the calendar is laid out. The preview on the right updates as you change each option.
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. Featured info in class title
Featured info in class title lets you choose which piece of information appears first on each calendar card: Service, Teacher or Schedule.
3. Filter options
Filters help clients find the classes that match their preferences. You can filter the calendar by:
Teacher — show classes with specific teachers.
Service — filter by type of class, for example Yoga, Pilates or HIIT.
Venues — show classes at a specific 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 clients need to scroll sideways to see all of them. To change that, paste one of the snippets below into your Custom CSS editor.
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. Publish the widget on your website
Once you've set up your widget, open step 3 · Publish.
Select Copy embed code.
Go to your website editor.
Add an HTML block or Code element, and paste the code.
To check the widget before adding it to your site, copy the preview link from the same step instead.
Important: the configuration you set in the Back Office doesn't update automatically on your website. Each time you change the configuration, a new embed code is generated. Your changes only appear once you've 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, contact your Account Manager.