Adding the calendar and form to a page
Check out our video tutorial for embedding the calendar and form.
You can embed a calendar with a form to any page of your website, but the embed method depends on your theme and/or what page builder you are using.
WP Booking System integrates with the default WordPress editor, Gutenberg, and the most popular page builders such as Divi or Elementor.
- The shortcode
- Divi
- Elementor
- Gutenberg
- Beaver Builder
- Avada Builder
- Bricks Builder
- WP Bakery
- Visual Composer
- The shortcode generator
If your page builder does not have a widget for embedding the calendar, don’t worry, you can always use the Shortcode to add your calendar.
The embed options
| Option | Values | Description |
|---|---|---|
| Calendar | The ID of the calendar | The calendar you wish to be displayed on the page. |
| Form | The ID of the form | The form you wish to attach to the calendar. Calendars can be embedded without a form, in which case they won’t allow the customer to make bookings, the calendar will just display the availability. |
| Display Calendar Title | Yes/No |
Displays the calendar title as a heading above the calendar. |
| Display Legend | Yes/No |
Displays the calendar’s legend items. |
| Legend Position | Side/Top/Bottom |
The position of the calendar legend. Can be to the side of the calendar, above the calendar, or below the calendar. |
| Months to Display | 1-24 |
The number of calendar months to be displayed |
| Start Year | Current Year or a year eg. 2030 |
The starting year of the calendar. |
| Start Month | Current month or January to February |
The starting month of the calendar. |
| Language | Auto or language code |
The language in which to display the calendar and form. With auto the plugin tries to detect your website’s language automatically. |
| Week Start Day | Monday to Sunday |
The starting day of the week. |
| Show History | – Display booking history – Replace history with the default legend item – Use the Booking History color from the Settings |
Handles the past dates in the calendar. |
| Display Tooltips | – No – Yes – Yes, with a red indicator |
Handles the tooltips in the calendar. |
| Highlight Today | Yes/No |
Highlight today’s date in the calendar |
| Show Week Numbers | Yes/No |
Show the week numbers in the calendar |
| Show Prices | Yes/No |
Show the daily price for each day. Only works if pricing is enabled. |
| Form Position | Side/Bottom |
The position of the booking form |
| Automatically Block Dates | Yes/No |
Handles what happens to the booked dates after the booking is made. If set to Yes, the dates will be marked as unavailable in order to prevent double bookings. If the Inventory add-on is installed, the dates will be marked as unavailable only when the inventory reaches 0. |
| Selection Type | Date Range/Single Date |
Handles the date selection in the calendar. |
| Selection Style | Normal/Split |
Handles the date selection style. The Normal option selects full days, while the Split option marks the starting and ending days of the selection as half days or changeover days. When using pricing, Normal counts days and Split counts nights. |
| Minimum Days | any positive integer |
Sets a restriction for the minimum days that must be booked. If the Booking Restrictions add-on is installed, this parameter is ignored. |
| Maximum_days | any positive integer |
Sets a restriction for the maximum days that must be booked. If the Booking Restrictions add-on is installed, this parameter is ignored. |
| Booking Start Day | Monday to Sunday |
Sets a restriction for the day of the week on which the booking can start. If the Booking Restrictions add-on is installed, this parameter is ignored. |
| Booking End Day | Monday to Sunday |
Sets a restriction for the day of the week on which the booking can end. If the Booking Restrictions add-on is installed, this parameter is ignored. |
| Show Date Selection | Yes/No |
Show the start date and end date of the date selection made in the calendar at the beginning of the booking form. |
