With the Calendar Element, you can book Appointments or Schedule Events on specific dates and times. It is particularly useful for service-oriented sites like barbershops, dance classes, or yoga studios.
Add Calendar Element
You can add the Calendar Element from the Add Panel.
Calendar Block Presets
We have added the new Calendar Block Presets to the Add Panel's Calendar and Block sections.
Calendar Properties
Go to the Property Panel for the selected Calendar Element to set its Calendar Name and Schedule Events, and style it.
Calendar Name
You can enter the Calendar Name used to identify your Calendar on the Calendar Appointments page of your Profile.
Schedule Events
Click the Schedule on the Calendar's Property Panel to set the Time Zone, Days, specific Dates, Times, and Schedule Options.
You can set the following parameters on the Schedule Panel.
Time Zone
You can select the Time Zone for your Calendar Appointments.
Days & Hours
Specify the Weekdays or a specific Date for your Calendar Appointments. Click the Plus icon to add the new Days & Hours.
Click the Days & Hours line to edit the time and add additional Time Spots. You can also add the Time Spot by clicking the Plus and remove it by clicking the Minus.
You can remove the Days & Hours by clicking the Munis.
Schedule Options
You can also modify the Duration, Date Range, and Time to Close options for the Calendar Schedule.
Stylize Calendar
You can stylize the Dates, Weekdays, Month and Year, and Time Slots in the corresponding Property Groups. You can also modify the general Element Properties like Background, Border, Shadow, etc.
When booking an appointment, your users can fill out the Booking Form. The following clip is an example of the Booking Popup work.
If you already have a Calendar, select it, go to the Property Panel, then click the Booking Popup button to create a new Booking Popup.
You can also add and remove Form Fields for the Booking Form, similar to the Contact Form Element.
We have added the Recaptcha support for the Calendar Bookings. Now, it is required.
Calendar Element Styles
The Style Properties for the Dates are shown below. Similarly, you can stylize Weekdays, Month and Year, and Time Slots on their Panels.
Calendar Settings
You can set the Notification shown when your site visitor books an Appointment.
Calendar On Live Site
After you add and stylize the Calendar Element to a site, you can publish and export this site so visitors can book Appointments.
The Dates and Times are shown in the local visitor's Time Zone. The Calendar can be exported to HTML, WordPress, Joomla, and the Online Builder.
!Book Appointments
Your site visitor can click the Date and then the Time to book an Appointment. If the Appointment is booked, you will see the Success Message, which you set in the Calendar Settings.
Appointment Notification
The site owner will receive an email about the new Appointment to the Address used in the Profile.
Manage Appointments
The site owner can see all the Calendar Appointments page on the Nicepage site.
Calendar Appointments Links
You can open the page from the Profile, Site Settings, and Calendar Properties.
Select Calendar
On the Calendar Appointments page, you can select the Calendar with Appointments.
Appointment Tabs
The Upcoming Tab shows the current bookings. When the Appointment expires, it will automatically move to the Past Tab. You can click the Bucket icon to cancel the Appointment. The Cancelled Appointments will move to the Cancelled tab.
Related Articles
With the Calendar Element, you can book Appointments or Schedule Events on specific dates and times. It is particularly useful for service-oriented sites like barbershops, dance classes, or yoga studios.
## Add Calendar Element
You can add the Calendar Element from the Add Panel.
!add-calendar.png!
## Calendar Block Presets
We have added the new Calendar Block Presets to the Add Panel's Calendar and Block sections.
!calendar-presets.png!
## Calendar Properties
Go to the Property Panel for the selected Calendar Element to set its Calendar Name and Schedule Events, and style it.
!calendar-properties.png!
### Calendar Name
You can enter the Calendar Name used to identify your Calendar on the Calendar Appointments page of your Profile.
!calendar-name.png!
### Schedule Events
Click the Schedule on the Calendar's Property Panel to set the Time Zone, Days, specific Dates, Times, and Schedule Options.
!calendar-schedule.png!
You can set the following parameters on the Schedule Panel.
### Time Zone
You can select the Time Zone for your Calendar Appointments.
!calendar-time-zone.png!
### Days & Hours
Specify the Weekdays or a specific Date for your Calendar Appointments. Click the Plus icon to add the new Days & Hours.
!calendar-days-hours-add.png!
Click the Days & Hours line to edit the time and add additional Time Spots. You can also add the Time Spot by clicking the Plus and remove it by clicking the Minus.
!calendar-days-hours-edit.png!
You can remove the Days & Hours by clicking the Munis.
!calendar-days-hours-delete.png!
### Schedule Options
You can also modify the Duration, Date Range, and Time to Close options for the Calendar Schedule.
!calendar-schedule-options.png!
## Stylize Calendar
You can stylize the Dates, Weekdays, Month and Year, and Time Slots in the corresponding Property Groups. You can also modify the general Element Properties like Background, Border, Shadow, etc.
!calendar-stylize.png!
## Calendar Booking Form
When booking an appointment, your users can fill out the Booking Form. The following clip is an example of the Booking Popup work.
!booking-form-example.gif!
## Add Booking Popup
If you already have a Calendar, select it, go to the Property Panel, then click the Booking Popup button to create a new Booking Popup.
!create-booking-popup.png!
## Edit Booking Form Fields
You can also add and remove Form Fields for the Booking Form, similar to the Contact Form Element.
!booking-form-fields.png!
## Booking Form Recaptcha
We have added the Recaptcha support for the Calendar Bookings. Now, it is required.
!calendar-booking-recaptcha.png!
## Calendar Element Styles
The Style Properties for the Dates are shown below. Similarly, you can stylize Weekdays, Month and Year, and Time Slots on their Panels.
!calendar-stylize-date.png!
## Calendar Settings
You can set the Notification shown when your site visitor books an Appointment.
!calendar-settings.png!
## Calendar On Live Site
After you add and stylize the Calendar Element to a site, you can publish and export this site so visitors can book Appointments.
!calendar-live-site.png!
The Dates and Times are shown in the local visitor's Time Zone. The Calendar can be exported to HTML, WordPress, Joomla, and the Online Builder.
## !Book Appointments
Your site visitor can click the Date and then the Time to book an Appointment. If the Appointment is booked, you will see the Success Message, which you set in the Calendar Settings.
!book-appointment-success.gif!
## Appointment Notification
The site owner will receive an email about the new Appointment to the Address used in the Profile.
!calendar-appointment-email.png!
## Manage Appointments
The site owner can see all the Calendar Appointments page on the Nicepage site.
!appointments-page.png!
### Calendar Appointments Links
You can open the page from the Profile, Site Settings, and Calendar Properties.
!calendar-appointment-links.png!
### Select Calendar
On the Calendar Appointments page, you can select the Calendar with Appointments.
!appointments-select-calendar.png!
### Appointment Tabs
The Upcoming Tab shows the current bookings. When the Appointment expires, it will automatically move to the Past Tab. You can click the Bucket icon to cancel the Appointment. The Cancelled Appointments will move to the Cancelled tab.
!cancel-appointments.gif!
## Related Articles
- [Calendar Submissions](page:549403)
##
