How do I embed a booking calendar on a page in WordPress?
You can embed a WP Booking System calendar on any WordPress page using the Single Calendar block or page-builder widget, or by using a shortcode.
To allow visitors to make bookings, attach a booking form to the calendar.
If you only want to display availability, embed the calendar without a form.
Choose how to embed the calendar
WP Booking System integrates with:
- Gutenberg;
- Elementor;
- Divi;
- Beaver Builder;
- Avada Builder;
- Bricks Builder;
- WPBakery;
- Visual Composer.
You can also use the WP Booking System shortcode with virtually any WordPress editor or page builder that processes shortcodes.
If your editor does not have a dedicated WP Booking System element, use the shortcode method.
Embed a calendar with Gutenberg
Open the page or post where you want the calendar to appear.
Click:
+ Add Block
and search for:
calendar
Select the WP Booking System:
Single Calendar
block.
Choose the calendar you want to display and, if you want to accept bookings, select a booking form.
Configure the remaining calendar options from the block settings and publish or update the page.
Embed a calendar with Elementor
Edit the page with Elementor.
Search the Elementor widgets for:
WP Booking System
or:
wp booking
Drag the:
Single Calendar
widget onto the page.
Select:
- the Calendar;
- the Form, if bookings should be enabled.
Configure the calendar options and update the page.
Embed a calendar with Divi
Edit the page using Divi and add a new module.
Search for:
calendar
and select the WP Booking System:
Single Calendar
module.
Choose your calendar and booking form, configure the display options and save the page.
Embed with another supported page builder
WP Booking System also includes integrations for:
- Beaver Builder;
- Avada Builder;
- Bricks Builder;
- WPBakery;
- Visual Composer.
Look for the WP Booking System Single Calendar widget, module or element inside your builder.
The available settings correspond to the normal WP Booking System calendar embed options.
If you cannot find the dedicated element, add your builder’s standard Shortcode element instead and use the WP Booking System shortcode.
Embed the calendar with a shortcode
The basic shortcode for a calendar with a booking form is:
The:
id
is the Calendar ID.
The:
form_id
is the Form ID.
Replace the example IDs with the calendar and form you want to display.
For example:
displays Calendar 4 together with Form 7.
Where do I find the Calendar ID and Form ID?
Go to:
WP Booking System → Calendars
to find your Calendar IDs.
Go to:
WP Booking System → Forms
to find your Form IDs.
When using a dedicated Gutenberg block or page-builder widget, you can normally select the calendar and form from a dropdown instead of entering the IDs manually.
Display availability without taking bookings
A booking form is optional.
To display only the calendar’s availability, omit the form_id.
For example:
Visitors can see the calendar but cannot submit a booking.
This is useful when you accept reservations through:
- phone;
- email;
- another booking platform;
- another booking process.
Display more than one month
Use the:
display
option.
For example:
displays two months.
The standard calendar can display between 1 and 24 months.
For accommodation bookings, displaying two or three months is often useful because visitors can see upcoming availability without navigating between months as frequently.
Hide the calendar title
By default, WP Booking System displays the calendar title.
To hide it:
title="no"
For example:
This is useful when the page already contains the property or resource name as a heading.
Show or hide the calendar legend
The calendar legend explains the availability colors used by the calendar.
To display it:
legend="yes"
To hide it:
legend="no"
For example:
In most cases, keeping the legend visible helps visitors understand which dates are available, booked or otherwise unavailable.
Change the legend position
The legend can be displayed:
- beside the calendar;
- above the calendar;
- below the calendar.
The shortcode values are:
side
top
bottom
For example:
Place the booking form beside the calendar
The booking form can be positioned:
- below the calendar;
- beside the calendar.
Use:
form_position="bottom"
or:
form_position="side"
For example:
Whether a side-by-side layout works well depends on the width of your page and the amount of information in your booking form.
Always check the layout on mobile devices.
Automatically block booked dates
The:
auto_pending
option controls whether selected dates are automatically marked unavailable after a booking is submitted.
Use:
auto_pending="yes"
For example:
This helps prevent another customer from booking the same dates while the booking is being reviewed.
Automatically Block Dates is enabled by default in the standard shortcode configuration, but including it explicitly can make the intended behaviour clear when you maintain custom shortcodes.
If the Inventory add-on is active, the date becomes unavailable only after its inventory reaches zero.
Allow a single date or date range
WP Booking System supports two selection types.
Single date
Use:
selection_type="single"
This allows the customer to select one date.
Date range
Use:
selection_type="multiple"
The customer selects a start and end date.
This is the normal setup for accommodation and other multi-day rentals.
Choose Normal or Split selection
WP Booking System supports two date-selection styles.
Normal
selection_style="normal"
All selected dates are treated as full days.
When pricing is enabled, the booking is calculated in days.
Split
selection_style="split"
The first and last selected dates are displayed as half or changeover days.
When pricing is enabled, the booking is calculated in nights.
Split selection is generally suitable for accommodation where customers select a check-in and check-out date.
For example:
July 10 → check-in
July 15 → check-out
represents a 5-night stay.
Set a minimum or maximum booking length
For simple booking restrictions, you can use:
minimum_days
and:
maximum_days
For example:
This limits the selected booking length.
If the Booking Restrictions add-on is active, these shortcode options are ignored and the restrictions should be configured from the form’s Booking Restrictions settings instead.
Restrict the booking start or end day
You can also set a fixed weekday on which bookings may start or end.
Use:
booking_start_day
and:
booking_end_day
The values are:
1– Monday;2– Tuesday;3– Wednesday;4– Thursday;5– Friday;6– Saturday;7– Sunday.
For example, a Saturday-to-Saturday rental could use:
booking_start_day="6" booking_end_day="6"
If the Booking Restrictions add-on is enabled, configure these rules from Booking Restrictions instead because the shortcode values are ignored.
Show prices on the calendar
If pricing is enabled, use:
show_prices="yes"
For example:
This displays the price assigned to each date directly on the calendar.
It is useful when prices change according to:
- season;
- weekday;
- weekend;
- holiday;
- special event.
Highlight today’s date
Use:
highlighttoday="yes"
to visually identify the current date.
For example:
Display week numbers
Use:
weeknumbers="yes"
if you want the calendar to display week numbers.
This can be useful for rental markets where customers frequently refer to booking periods by week number.
Show the selected dates above the form
Use:
show_date_selection="yes"
to display the selected start and end dates at the beginning of the booking form.
This gives customers an additional confirmation of the dates they are about to submit.
Change the calendar language
By default, WP Booking System uses:
language="auto"
and attempts to detect the website language automatically.
You can also specify a two-letter language code when required.
For most websites, leaving the language set to Auto is recommended.
Jump to the first available date
If your near-term dates are fully booked, you can enable:
show_first_available_date="yes"
This makes the calendar jump to the month containing the first available bookable date.
It can be useful for seasonal properties or businesses where the next availability may be several months away.
A practical accommodation shortcode
A typical accommodation setup could look like:
This:
- displays Calendar 1;
- attaches Form 1;
- hides the duplicate calendar title;
- displays the legend below the calendar;
- displays two months;
- automatically blocks booked dates;
- allows date-range selection;
- uses check-in/check-out style selection;
- displays the selected dates above the form.
You do not need to include every available parameter in every shortcode. Only configure the options required by your booking setup.
Can I use the same form with several calendars?
Yes.
For example:
Apartment A:
Apartment B:
Both use Form 5, but their calendar availability and bookings remain separate.
This is useful when several properties use the same booking fields and notification workflow.
Can I embed more than one calendar on a page?
Yes.
You can add multiple Single Calendar blocks, widgets or shortcodes to one page.
For example:
and:
However, if you have many resources, consider using the Overview Calendar or Search Widget rather than placing a long list of individual booking calendars on one page.
Can I show all my calendars together?
Use the Overview Calendar when visitors need to compare availability across several calendars.
The Overview Calendar can display:
- all calendars;
- selected calendars.
It is an availability-only view and does not allow bookings directly from the Overview Calendar.
You can link each resource to its own booking page.
Can I show a full year?
Yes.
The Yearly Calendar displays the availability of one calendar for an entire year.
It can also be embedded using:
- shortcode;
- Gutenberg;
- Elementor;
- Divi.
A booking form can optionally be attached to the Yearly Calendar as well.
What about the Classic Editor?
Older WordPress installations or websites using the Classic Editor plugin can use the WP Booking System Shortcode Generator.
An Add Calendar button appears above the editor.
Click it, configure the calendar options and select:
Insert Calendar
WP Booking System then generates and inserts the appropriate shortcode for you.
You can also enter the shortcode manually.
Test the calendar after embedding it
After publishing the page, test the complete booking process from the front end.
Check the calendar
Confirm:
- the correct calendar is displayed;
- availability is correct;
- navigation works;
- the legend is understandable;
- prices are correct if displayed.
Make a test booking
Select a valid date or date range and submit the form.
Confirm that:
- the booking is created under the correct calendar;
- the submitted customer information is correct;
- notification emails are sent;
- the dates become unavailable if Automatically Block Dates is enabled.
Test mobile
Open the booking page on a phone.
Check:
- month navigation;
- date selection;
- form fields;
- price breakdown;
- payment method selection;
- confirmation messages.
A calendar that looks correct inside a desktop page builder should still be tested on the live mobile page.
Why does the calendar show but not the booking form?
Check whether a form has been attached.
With a shortcode, you need:
form_id="..."
For example:
Without form_id, WP Booking System intentionally displays availability only.
If you use a page-builder widget or Gutenberg block, edit the element and make sure a Form is selected.
Why isn’t the calendar appearing?
Check:
- that WP Booking System is active;
- that the Calendar ID exists;
- that the correct Single Calendar block or widget is being used;
- that the shortcode was copied correctly.
If the calendar still does not render correctly, test the page without aggressive caching, JavaScript delay or CSS optimization to rule out a front-end conflict.
Why are bookings submitted but the dates remain available?
Make sure Automatically Block Dates is enabled.
With a shortcode, check:
auto_pending="yes"
If you use Inventory, remember that the date stays available until its remaining inventory reaches zero.
Also check that you are viewing the same calendar on which the booking was created.
Which embedding method should I use?
Use the dedicated Single Calendar block or widget when your editor supports it. It provides a visual interface for the available embed settings.
Use the shortcode when:
- your editor does not have a dedicated WP Booking System integration;
- you want to copy the same configuration between pages;
- you prefer controlling the embed options directly.
Both methods use the same underlying WP Booking System calendar and booking functionality.
Summary
WP Booking System calendars can be embedded using a native block or page-builder integration, or with the universal:
Calendar does not exist.
shortcode.
To accept bookings, attach a form:
To display availability only:
You can then control options such as the number of visible months, legend position, date-selection style, booking restrictions, prices, Automatically Block Dates and form position.
For most users, the dedicated Single Calendar block/widget is the easiest method. The shortcode remains the most portable option and works when a dedicated integration is not available.
