Documentation Menu

• Home
• Documentation
• Help Center
• Setup & Embedding
• Can I add a booking calendar to Elementor (or Gutenberg)?

Can I add a booking calendar to Elementor (or Gutenberg)?

Yes. WP Booking System includes dedicated integrations for both Elementor and the WordPress Gutenberg editor.

You can add a booking calendar using the Single Calendar widget/block, select the calendar and booking form you want to display, and configure the calendar directly from the editor.

You can also use a WP Booking System shortcode if you prefer.

Add a booking calendar with Elementor

Open the WordPress page where you want to display the booking calendar and click:

Edit with Elementor

In the Elementor Elements panel, search for:

WP Booking System

or:

wp booking

WP Booking System adds its own group of Elementor widgets.

Drag the:

Single Calendar

widget onto the page.

Select the calendar and booking form in Elementor

After adding the Single Calendar widget, its settings appear in the Elementor sidebar.

Select the calendar you want to display.

If visitors should be able to make a booking, also select the booking form you want to attach.

For example:

Calendar → Apartment A

Form → Accommodation Booking Form

If you only want to display availability, leave the form unselected.

Configure the Elementor calendar

The Single Calendar widget gives you access to the normal WP Booking System embed options.

Depending on your setup, these include options such as:

• number of months displayed;
• calendar title;
• legend;
• legend position;
• selection style;
• minimum and maximum booking length;
• booking start and end days;
• Automatically Block Dates;
• prices;
• tooltips;
• past availability.

Configure the options you need and click:

Update

to save the page.

Add a booking calendar with Gutenberg

Open the page or post in the WordPress block editor.

Click the:

+

button to add a block.

Search for:

calendar

and select the WP Booking System:

Single Calendar

block.

The calendar will be inserted into the page.

Configure the Gutenberg block

Select the Single Calendar block.

Its WP Booking System settings appear in the editor sidebar.

Choose:

• the calendar you want to display;
• the booking form, if you want to accept bookings;
• the display and booking options you need.

If the settings sidebar is not visible, open the block options menu using the three vertical dots and select:

Show more settings

After configuring the calendar, click:

Update

or:

Publish

Add a calendar with a booking form

To accept bookings directly from the page, select both:

• a Calendar;
• a Form.

The calendar controls availability and date selection.

The form collects the customer’s booking details.

For example, the form might contain:

• Name;
• Email;
• Phone;
• Number of Guests;
• Message;
• Payment Method.

The same form can be reused with multiple calendars if the booking process is identical.

Show availability only

If you want visitors to see availability without submitting bookings, select the calendar but do not attach a form.

The calendar will still display its availability and legend, but no booking form will appear.

This is useful for:

• availability pages;
• properties booked by phone or email;
• websites where the final booking takes place on another platform.

Use a shortcode instead

You can also embed WP Booking System using its shortcode.

A basic calendar with a booking form looks like:

where:

id="1" is the Calendar ID;

form_id="1" is the Form ID.

To display availability only:

Use the shortcode in Elementor

In Elementor, add a:

Shortcode

widget.

Paste your WP Booking System shortcode into the shortcode field.

For example:

The calendar will render on the page.

The native Single Calendar widget is usually more convenient because its options can be configured visually, but the shortcode is useful when you already have a specific embed configuration you want to reuse.

Use the shortcode in Gutenberg

In Gutenberg, add a:

Shortcode

block.

Paste the WP Booking System shortcode into it.

For example:

Publish or update the page and view it on the front end.

Where can I find the Calendar ID and Form ID?

Go to:

WP Booking System → Calendars

to find your calendars.

Then go to:

WP Booking System → Forms

to find your booking forms.

You normally do not need to enter IDs manually when using the Elementor widget or Gutenberg block because you can select the calendar and form from the editor.

The IDs are primarily useful when using shortcodes.

Can I use different calendars on different Elementor pages?

Yes.

For example:

Apartment A page

Calendar → Apartment A
Form → Accommodation Form

Apartment B page

Calendar → Apartment B
Form → Accommodation Form

Both resources can use the same booking form while maintaining separate availability.

This is a common setup for rental websites built with Elementor.

Can I place several calendars on the same page?

Yes.

You can add multiple Single Calendar widgets or blocks to a page.

For example:

Apartment A

Single Calendar → Apartment A

Apartment B

Single Calendar → Apartment B

However, if visitors need to compare a large number of resources, the Overview Calendar or Search Widget may provide a cleaner experience than displaying many individual calendars one after another.

Does WP Booking System work with Elementor templates?

Yes, as long as the template or page area supports normal Elementor widgets or shortcodes.

For example, you can place the Single Calendar widget inside a property page layout built with Elementor.

When working with reusable templates, make sure the correct calendar is displayed for each resource rather than accidentally showing the same Calendar ID on every property page.

Does WP Booking System work with the Gutenberg Site Editor?

The WP Booking System block can be used in block-editor areas that support normal WordPress blocks.

If a particular template area does not allow the Single Calendar block in your setup, the shortcode provides an alternative wherever WordPress shortcodes are processed.

Can I customize the calendar appearance in Elementor?

Elementor controls the layout surrounding the booking calendar, such as:

• section width;
• columns;
• spacing;
• background;
• headings and other page content.

The appearance of the WP Booking System calendar itself is primarily controlled by WP Booking System.

You can customize its appearance from the plugin’s settings and, when needed, with custom CSS.

This keeps the calendar styling consistent even if it is embedded on several pages or through different editors.

Test the booking calendar after embedding it

After publishing the page, test the calendar on the front end.

If bookings are enabled:

1. Select a valid date range.
2. Complete the booking form.
3. Submit a test booking.
4. Confirm that the booking appears under the correct calendar.
5. Check that the selected dates become unavailable if Automatically Block Dates is enabled.
6. Check that the expected emails are sent.
7. Test the page on mobile as well as desktop.

If online payments are enabled, complete a test payment using the gateway’s test or sandbox mode where available.

Why can’t I find the WP Booking System Elementor widget?

Make sure WP Booking System is installed and activated.

Then search Elementor for:

wp booking

The dedicated widgets should appear under the WP Booking System category.

If you still cannot use the widget, you can embed the calendar immediately with Elementor’s standard Shortcode widget.

Why can’t I see the Gutenberg calendar settings?

Click the Single Calendar block first.

If the settings still do not appear, open the block’s three-dot menu and select:

Show more settings

The WP Booking System embed options should then appear in the editor sidebar.

Why does the editor look different from the live page?

Some dynamic elements are not rendered exactly the same inside a page builder or block editor as they are on the published page.

Always check the actual front end after making changes.

The live page is where you should verify:

• calendar layout;
• date selection;
• booking form;
• responsive behaviour;
• availability;
• pricing.

Do I need Elementor Pro?

No.

WP Booking System’s Elementor integration does not require Elementor Pro simply to embed the booking calendar.

You can add the WP Booking System Single Calendar widget to an Elementor page and configure it from there.

Which method should I use?

Use the Elementor Single Calendar widget if your site is built with Elementor.

Use the Gutenberg Single Calendar block if you use the default WordPress block editor.

Use the shortcode when:

• you want a portable embed that works across editors;
• you already have a shortcode configuration;
• you are placing the calendar somewhere without a dedicated WP Booking System widget or block.

All three methods display the same WP Booking System calendar and booking functionality.

Summary

WP Booking System integrates directly with Elementor and Gutenberg.

In Elementor:

1. Search for WP Booking System.
2. Add the Single Calendar widget.
3. Select your calendar and, optionally, a booking form.
4. Configure the embed options.
5. Update the page.

In Gutenberg:

1. Add a new block.
2. Search for calendar.
3. Add the WP Booking System Single Calendar block.
4. Select your calendar and form.
5. Configure the settings.
6. Publish or update the page.

If you prefer, you can always use a standard WP Booking System shortcode instead.