Class Timetable Widget
Publish your weekly class schedule as day tabs on phones and a full week of columns on wide pages, with filter chips by class and level, the class running now and the next one marked in your studio's own time zone, and a Book button on every class.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<iframe src="https://a2z.tools/embed/w/class-timetable" title="Class Timetable by A2Z Tools" width="100%" height="560" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>
A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.
<div data-a2z-widget="class-timetable" data-height="560"></div> <script async src="https://a2z.tools/embed.js"></script>
Adds a small script (what it does) that sizes the widget to fit its content, loads it lazily and keeps it isolated from your page's CSS.
Works with
How it works
Write the week as day headings - ## Monday to ## Sunday, or Mon to Sun - followed by one class per line: start | end | class | instructor | room | level | booking link. Times can be 18:30, 18.30 or 6:30pm; a line whose end is not after its start is skipped and counted in a note. Now and Next are worked out from the current instant converted to your studio's IANA time zone, so a London studio is right in both GMT and BST and a visitor in New York still sees Spin marked Now at 06:30 London time. A class is Now from its start minute up to, but not including, its end minute; Next is the soonest start after that, wrapping from Sunday night to Monday morning. Today's tab opens first, or the next day that has classes. On frames 720px and wider the default view shows every day as a column inside a scrollable region. Filter chips appear when there are 2 to 14 distinct classes or levels; choosing one announces how many classes remain.
Method
- Studio wall clock = current instant in the IANA zone (Intl, daylight saving included) -> weekday (Monday = 0) and minute of day
- Now: same weekday and start <= minute < end
- Next: smallest ((day - today + 7) mod 7) x 1440 + start - minute that is greater than 0, else plus 7 x 1440
- Auto view: day tabs below 720px wide, week columns from 720px
Worked examples
Monday morning in London (summer time)
Inputs: default timetable; zone Europe/London; now 2026-10-05 05:40 UTC
Result: Spin 06:30-07:15 marked Now; Pilates 12:15 marked Next
05:40 UTC is 06:40 BST on Monday, inside the 06:30-07:15 class.
Same instant in winter
Inputs: now 2026-01-05 05:40 UTC (Monday)
Result: No class running; Spin 06:30 marked Next
05:40 UTC is 05:40 GMT in January, 50 minutes before the class.
End of the week
Inputs: Sunday 11:30 after the last class
Result: Next marker on Monday 06:30 Spin
The search wraps from Sunday to Monday.
A published class schedule, not a booking confirmation or exercise advice: confirm times with the studio, and check with a health professional before starting a new kind of exercise if you are unsure.
Limitations
- A repeating weekly pattern only; one-off changes, holidays and cancellations need editing the lines or a separate notice.
- Classes cannot run past midnight; split a late class into two lines if you need to.
- Places left and waiting lists come from your booking system, not from this card.
- Now and Next rely on the visitor's device clock being right.
Where publishers use it
- A boutique gym or spin studio website, embedded under Classes so members check today's schedule on their phone
- A yoga or Pilates teacher who rents rooms in several venues and lists room and level for each session
- A swimming pool or leisure centre timetable with Beginner and Advanced lessons filtered by level
- A dance, martial-arts or music school showing weekly group lessons with a Book link to its booking system
- A community centre newsletter page listing weekly clubs in the centre's own time zone
Questions
Which time zone are Now and Next based on?
Your studio's, set as an IANA name such as Europe/London, America/New_York or Australia/Sydney. The visitor's device supplies only the current instant, which is converted to your zone's wall clock - so on Monday 5 October 2026 at 05:40 UTC a London studio is at 06:40 BST and its 06:30 Spin class is Now, while in January the same UTC moment is 05:40 GMT and Spin is Next, 50 minutes away. Without a zone, Europe/London is used; an unknown zone falls back to UTC and says so.
How should I write the times?
One class per line, start then end: 06:30 | 07:15, or 6:30am | 7:15am, or 18.30 | 19.15. Midnight is 00:00 or 12am, noon is 12:00 or 12pm. A class must end after it starts on the same day; a line like 19:00 | 18:00 is skipped and the card counts it so you can find it.
When do the filter chips appear?
Class chips appear when the timetable has between 2 and 14 different class names, and level chips when it has between 2 and 14 different levels. Names are matched without regard to capital letters, so Spin and spin are one chip. Each chip is a toggle button that tells screen readers whether it is pressed, and the number of classes still shown is announced after each change.
Can each class have its own booking link?
Yes - put an https link in the seventh column and that class gets a Book button. Set a general booking link in the embed settings and every class without its own link uses it. Links open in a new tab; javascript: and data: addresses are refused.
Does the page refresh the Now marker by itself?
Once a minute the card re-checks which class is running and moves the markers when they change - no animation and no page reload. Screen readers hear Now: and the class name only when it changes, never every minute.
How do keyboard users move between days?
The day buttons follow the WAI-ARIA tabs pattern: Tab moves into the selected day, Left and Right arrows move between days and wrap around, Home and End jump to Monday and Sunday, and Tab again moves into that day's classes.
Sources
- Tabs Pattern - W3C WAI-ARIA Authoring Practices Guide . Keyboard model for the day tabs: arrow keys with wrap-around, Home and End, roving tabindex. Checked 2026-10-01.
- Time Zone Database - IANA . Zone names and daylight-saving rules behind the browser's time-zone conversion. Checked 2026-10-01.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Class Timetable https://a2z.tools/embed/class-timetable
<a href="https://a2z.tools/embed/class-timetable">A2Z Tools Class Timetable</a>
[A2Z Tools Class Timetable](https://a2z.tools/embed/class-timetable)
Class Timetable by A2Z Tools - https://a2z.tools/embed/class-timetable
Related widgets
-
Shows Open now or Closed and when you open next, in your business's own time zone.
-
A conference or festival programme with day tabs, a live Now and Up next marker and local-time toggle.
-
Live local time, date and UTC offset for up to 12 cities you choose.
-
Estimated max heart rate and five training zones, with optional Karvonen zones.
-
Body mass index with the WHO adult category and the healthy weight range for a height.
-
Basal metabolic rate from Mifflin-St Jeor or the revised Harris-Benedict equation.