Class Timetable Section
A week of classes set like a departure board — placed by real start time and length, one accent stripe behind today, filters that dim rather than delete, and a day rail on phones.
DOM + CSS0 deps1 file · 13 KB TSXreduced-motion aware
Props
"use client";
import { useState, useSyncExternalStore } from "react";
/**
* ClassTimetable — a week of classes set like a departure board.
*
* Seven columns, the hours down the side, and every class placed by its real
* start time and length, so a 45-minute class is visibly shorter than a
* 90-minute one. The day headers are heavy two-letter caps. The one accent on
* the board is a full-height stripe behind TODAY's column — never on the
* classes themselves, which is what turns a board back into a spreadsheet.
*
* FILTERS DIM, THEY DO NOT REMOVE. Choosing "Yoga" fades every other class to
* 25% instead of deleting it, so the shape of the week stays readable and
* nobody loses their place.
*
* ON A PHONE IT IS A LIST. Below the wide breakpoint the grid becomes a rail
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
A studio's timetable is the page members open most, and nearly every one is a spreadsheet: rows of equal height, a rainbow of class types, and no sense of the shape of the day. This section sets the week like a departure board. Seven columns under heavy two-letter day caps, the hours down the side, and every class placed by its real start time and duration, so a forty-five-minute box is visibly shorter than a ninety-minute one. The only colour on the board is a full-height stripe behind today's column, decided on the client in the studio's own time zone, never on the classes themselves. Filters dim everything else to a quarter rather than removing it, so the week keeps its shape while you look for yoga. Every bookable class is a real link with an accessible name that says what, when and with whom; a full class stays on the board, marked full, with its link withdrawn. Below the wide breakpoint the grid becomes a rail of day chips and a stacked list, because seven columns at phone width are unreadable at any size.
Curator’s note
Every gym timetable on the web is a spreadsheet with a colour per class type. Put the accent on today instead and the board starts to tell you something.
