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.
- Category
- Sections
- Added
- 2026-09-25
- Deps
- none
- Updated
- 2026-09-25
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Timetable · this week
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Animated Stat Grid
sectionsA row of stat counters that count up together the moment they scroll into view.
Inline Editable Grid
componentsA keyboard-driven spreadsheet grid with roving-cell navigation and Excel-style Enter/Tab commits.
Animated Dot Matrix
backgroundsA grid of dots that pulses outward in concentric ripples, drawn on canvas.