top of page
Timetable

Timetable

Let customers book sessions using a class schedule.

Intermediate.png

Advanced

6K

Published:

December 31, 2019

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example, site visitors are presented with a schedule of upcoming classes. They navigate the class schedule by choosing a day and are then presented with all the available classes on that day.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

Visitors browse classes on the Schedule page. The main elements of the page are two repeaters. The first repeater displays a list of days. The second repeater displays the classes scheduled on a given day. When a visitor selects a day in the first repeater, the Bookings API is used to retrieve the service slots available for that day and display them in the second repeater.

 

When a visitor chooses a service to book, a lightbox with a form is shown to collect booking information. When the form is submitted, the Bookings API is used to book the service.

 

After the service is booked successfully, a thank you page is shown with a confirmation of the booking details. The details are passed from the booking form lightbox to the thank you page using the Storage API.


Next Steps


  1. Open this example in the Editor to work with the template.

  2. Publish the site and refresh your browser so the Bookings collections appear in the Database.

  3. Learn how to work with examples in Velo.

APIs We Used

API Link

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Image placeholder.png

Add to Cart Gallery

Let customers to add products to their cart

Intermediate.png

INTERMEDIATE

Image placeholder.png

Hide and Show Elements

Hide and show elements in response to user interactions

Begginer.png

BEGGINER

Image placeholder.png

Hide and Show Elements

Hide and show elements in response to user interactions

Begginer.png

BEGGINER

Anchor 2
bottom of page