Title: Adding a Timetable Category: website-editor
Where to find this: Services → Website Editor tab
The Timetable block shows your schedule on your website as an easy-to-read display. It reads from the booking slots you've already set up, so visitors can see what's on at a glance — without it being a place to book. Use it alongside your Booking Calendar, or on its own as a "What's on" page.
The Timetable draws on the same fixed slots that power your booking calendar. You don't enter sessions twice — set up your slots once under Services → Booking Management, and the Timetable displays them. To use it, your site needs Google Calendar connected and at least one venue with fixed slots.
How to Add It
- Go to Services → Website Editor tab.
- Open the Components tab in the left panel and find Timetable (in the Calendar group).
- Drag it onto your page and drop it where you see a highlighted zone.
- Click the block to open its settings in the right panel.
Choosing a Timetable Type
In the Mode section, pick how the schedule is laid out under Timetable Type:
- Weekly schedule — a recurring grid of days and times. Best for regular weekly classes and sessions.
- Dated events — a set of cards for things that run on specific dates, such as camps, courses or workshops. Each card shows its date range.
When you choose Dated events, a Dated section label field appears. Type the word your business uses for these — Camps, Courses, Workshops or Events. It's used in the message shown when nothing is scheduled.
Setting Up the Data
The Data section controls which sessions appear.
Venues
- All (switcher) — visitors get a dropdown to switch between your venues. The dropdown only appears when you have more than one venue.
- Single venue — pin the Timetable to one venue. Choose it from the Venue picker that appears.
Service filter
Decide which services show up:
- Show all — every service appears.
- Only these — show just the services you tick.
- Hide these — show everything except the services you tick.
When you choose Only these or Hide these, a list of your real services appears below — click a service to tick or untick it.
Weekly schedule options
When Timetable Type is Weekly schedule, you also get:
- Days shown — With sessions (only days that have something on) or All 7 days.
- Time format — 24-hour (14:00) or 12-hour (2:00 PM).
Dated events options
When Timetable Type is Dated events, you can limit the date range:
- Earliest date — hide events that finish before this date. Leave it blank to show upcoming events from today.
- Latest date — hide events that start after this date. Leave it blank for no upper limit.
Leave both date fields blank and the Timetable automatically shows only upcoming events, starting from today. Set an Earliest date in the past only if you want to include events that have already started.
Display Options
The Display section controls the headings and extra details:
- Title — a heading shown above the schedule (for example "Our weekly timetable"). Leave it blank for no title.
- Highlight service — type the exact name of one service to give its sessions a heavier accent marking, so they stand out (for example a "Trial Class").
- Show capacity ('spaces') — turn this on to show each session's total number of spaces.
The number shown is the session's total capacity — the size you set up — not the number of places still free.
For Dated events, you can also click any month heading directly on the page and restyle it (size, weight, colour) with the standard text controls.
Colours
The Timetable Colours section lets you match the block to your brand. Each colour defaults to your site theme, and you can override any of them:
- Accent / side markings — the side stripe on each session, card edges and dots.
- Title text — the colour of your Title heading.
- Chip background and Chip / card text — the colour of each session block and its text.
- Card background — the background of dated-event cards.
- Lines & borders and Muted text — supporting colours for grid lines and lighter text.
Animation and Spacing
The Timetable supports the same standard controls as other components — including Animation (sessions and cards gently animate into view as a visitor scrolls), spacing, borders and effects. Find these in the lower sections of the settings panel.
Tips for an Effective Timetable
- Pick the right type — Weekly for regular classes, Dated events for camps and courses.
- Keep it focused — Use the service filter so visitors only see what's relevant to that page.
- Use a clear title — A short heading helps visitors understand what they're looking at.
- Check mobile view — Preview on mobile; the weekly grid stacks day-by-day on small screens.