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

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) ##