New: A weekly class schedule on your website

Version 4.1.11 of WebAcappella Fusion is now available, and it introduces a new feature: a weekly class schedule. Gyms, yoga or Pilates studios, clubs, dance schools, organizations, workshops, and recreation centers: if your schedule consists of time slots that repeat every week, you finally have a way to display them neatly on your website.

If you currently display your schedule as an image—exported from a spreadsheet or a PDF—you’re familiar with the limitations: text that’s unreadable on a phone, an image that needs to be redone every time the schedule changes, and content that search engines can’t read. The new component solves all three of these problems at once.

A real schedule, not a table

The difference from a table is the timeline. Each day occupies a column, each class is placed at its exact time, and its height is proportional to its duration: a one-and-a-half-hour class is visibly longer than a forty-five-minute session. Two classes that overlap in the same time slot are displayed side by side. You can read the schedule at a glance, just like on the whiteboard in the lobby.

Classes are linked to reusable activities. You define “Yoga,” “Pilates,” or “Boxing” once—with a background color and text color—and then assign them to time slots. Change the color for yoga, and all yoga classes will update accordingly. Each class can also specify a instructor, a studio, and a note: required level, reservation required, equipment to bring.

Getting Started: Set Up Your Schedule in Five Minutes

The component is located in the component library. Once placed in a section, it comes pre-filled with an example (yoga, cross training, Pilates, boxing, and a few classes spread throughout the week) so you can immediately see how it looks. Everything else is configured in a dedicated settings window.

1. Add the Schedule component to the section of your choice from the component library.
2. Double-click the schedule (or click “Configure Schedule...” in the inspector) to open the settings window.
3. In the Activities tab, replace the sample activities with your own: a name, a background color, and a text color.
4. In the Classes tab, delete the sample classes and add your own using the Add button: activity, day, start and end times, and then, if desired, coach, room, and grade.
5. Close the window: the schedule updates on the page, ready to be published.

Settings that adapt to your business

A club open Monday through Saturday doesn’t have the same needs as a recreation center that operates on a two-week rotation. The settings window covers these scenarios without any tinkering:

• Days: The entire week by default, Monday through Sunday. Remove closed days or change their order.
• Time Range: automatic based on the classes entered (the schedule starts with the first class and ends with the last, rounded to the nearest hour), or fixed if you prefer to display your opening hours.
• Hour Lines: one line per hour, or every 30, 15, or 10 minutes if your classes start on the half-hour or quarter-hour.
• Time Format: 24-hour or AM/PM, depending on your audience.
• Density: The “Pixels per hour” setting makes the schedule more compact or more spacious. It’s responsive, so you can adjust it on a per-screen basis.
• Appearance: colors and text for the day headers and the hour column, grid lines and day separators; and for the classes themselves, text size, rounding, inner margin, and the option to show or hide the time, instructor, and room.

On the published site: filters and legend

Above the schedule, your visitors have access to filter buttons: one button to display everything and one button per activity. Clicking “Pilates” shows only Pilates classes; clicking it again restores the full schedule. This is particularly useful on a busy schedule, where everyone is looking for their specific discipline. The bar appears only if at least two activities are selected. A legend listing the activities and their colors can also be displayed below the schedule; it is disabled by default, since each class already bears the name of its activity and the filter buttons serve the same purpose.

On mobile, the schedule becomes a list

Seven columns on a phone screen are unreadable, no matter how carefully they’re laid out. Below a mobile threshold that can be adjusted in the inspector, the schedule automatically switches to a day-by-day list: Monday, followed by its classes in order, then Tuesday, and so on. You can choose the screen size at which the switch occurs, or force one of the two modes to remain active at all times. Filters remain active in list mode, and a day where all classes are hidden disappears from the list.

A schedule translated along with the rest of the site

If your site is multilingual, the schedule follows suit: activity names, rooms, and notes are translatable just like any other content, and the names of the days are displayed in the language of each version of the site. Only the coach’s name remains the same across all languages, which is exactly the expected behavior.

Also in 4.1.11

• Table: a link in a cell. A cell can now link to a page on the site, a web address, an email, a downloadable file, or an anchor—either via the cell’s mini toolbar or by right-clicking. The text is underlined in the editor as it is on the site, and the underline can be disabled in the table’s Appearance tab.
• Link Checker: Tables and Flexible Containers. When a table or flexible container followed a text component, its web addresses and email addresses were overlooked by the link checking and replacement tools. They are now scanned.

What You Need to Do

1. Update WebAcappella Fusion to version 4.1.11.
2. Add the Schedule component to your schedule page, enter your activities, and then your classes.
3. Check the mobile rendering in the editor, adjust the mobile threshold if necessary, and then publish your site.

In summary

• A weekly class schedule on a real timeline: one column per day, classes placed at their scheduled times, with heights proportional to their duration.
• Reusable activities with their own colors, and for each class, a coach, a room, and a grade.
• Days, time slots, hour lines, time format, density, and appearance of each zone: everything is configured in a dedicated window.
• On the published site, filter buttons by activity and an optional legend.
• On mobile, a day-by-day list based on a threshold you choose.
• Exclusive to the SP4 license, available in a trial version.

If you’ve been displaying your schedule as an image up until now, it’s time to replace it: your visitors will be able to view it on their phones, search engines will index your activities, and the next schedule update will take just two clicks instead of an export.