In this document:
Easily embed the Booking Calendar into your Elementor page using the Schedule an Appointment Module in the Elementor editor.
What You Need First
How to Use Simply Schedule Appointments with Elementor
If you have both Simply Schedule Appointments and Elementor installed, when you’re editing a page with Elementor, you’ll see two modules on the left hand side: Schedule an Appointment and Upcoming Appointments.
Simply drag and drop from the left menu into your page to get started:
Using the Schedule an Appointment Module
This module displays your booking form and lets your users book an appointment:
Under the Content header, you can choose to show All Appointment Types, or filter to only display a single Appointment Type Calendar:
Under the Style tab, you can adjust the Accent Color, Background Color, Font Family, and Padding of the Appointments widget:
Under the Advanced tab, you can adjust several advanced design attributes of the widget, such as custom margins and padding, borders, mobile responsiveness, and Custom CSS:
Using the Upcoming Appointments Module
This module will show the logged-in user any appointments they’ve booked.
If there are no upcoming appointments , you can customize the message you want to show the user by editing the “Upcoming Appointments” text on the left side of the screen:
Under the “Advanced” tab, you can adjust several advanced design attributes of the widget, such as custom margins and padding, borders, mobile responsiveness, and Custom CSS:
When you’re finished with your changes, click on the green “Publish” button to save them.
File a support ticket with our five-star support team to get more help.
File a ticket
Cancel, Reschedule, Edit or Delete Bookings
Filtering and Viewing Bookings
Upcoming Appointments Module