Skip to content

component

Weekly Timetable

By Isaac Yi

Details

Summary

A timetable, not a booking widget.

Description

Reach for a schedule section and you end up embedding a booking tool — a calendar app, an account, a subscription, and a flow your visitors have to start before they can see anything. Most sites do not need that. They need to show the week. WHAT IT IS A day-by-time timetable. Every slot has a title, a status, and an optional note — "1 seat left", "Group of 6", "Resumes next term". Three statuses come styled: open, full, and no class. You type the slots as one flat list in the properties panel. Rows build themselves from the times you enter, in the order they first appear. No nesting, no dragging, no CMS collection to set up. AN HONEST NOTE This is a display component. It does not take bookings, hold seats, sync a calendar, or talk to a server. If you need a visitor to reserve a spot, you still want a booking tool — put this above it. What you get instead is something you can update in ten seconds from the panel, that costs nothing per month, and that cannot break because a third-party service changed. WHAT YOU GET — Mon-Fri, Mon-Sat, or Mon-Sun. Hidden days leave no empty rows behind. — Rename the three statuses to your own words: Open / Full / No class, or Available / Booked / Closed, or anything else. — Collapses to per-day cards below 620px of its OWN measured width, not the browser window — so it still behaves correctly inside a narrow column. — Optional legend and footnote for timezones or update cadence. — Light and dark, an accent color, and a transparent section background so it drops onto your existing page. — Every cell carries an aria-label with the day, time, title, and status. — Zero external libraries, zero layout shift. Pure React and CSS. Everything is configured from the properties panel. No code, no booking backend, no CMS.

Introduction

A timetable, not a booking widget.

Rank history

Daily rank per list, from the first snapshot — lower is better.

125015001750184739/29/59/89/119/15
  • All · #5040