• 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. You can add a booking calendar to Gutenberg or Elementor using either a dedicated plugin block/widget (if available) or a shortcode. The shortcode method is the most universal option because it works in the WordPress editor, Elementor, and most other builders. To do it, create your calendar (and optionally a booking form), then place the calendar on the page using a Shortcode block/widget and publish the page.

On this page

1. What you’ll need
2. Embed in Gutenberg (WordPress editor)
3. Embed in Elementor
4. Use the shortcode method (recommended)
5. Test your booking flow
6. Common issues (and quick fixes)
7. Best practices
8. Mini FAQ

What you’ll need

• WP Booking System installed and activated
• A calendar created in WP Booking System
• (Optional) A booking form created in WP Booking System if you want visitors to submit bookings
• A page you can edit in Gutenberg or Elementor

Embed in Gutenberg (WordPress editor)

In Gutenberg, you can embed your booking calendar either by using a WP Booking System block (if available) or by pasting the calendar shortcode into a Shortcode block.

1. Go to Pages and edit the page where you want the calendar.
2. Click + to add a block.
3. If you see a WP Booking System calendar block, insert it and select your calendar (and form, if applicable).
4. If you do not see a block, add a Shortcode block and paste the calendar shortcode.
5. Click Update or Publish.

Tip: If the calendar is not rendering, the shortcode method is usually the fastest way to confirm the embed is correct.

Embed in Elementor

In Elementor, you can embed your booking calendar by using a WP Booking System widget (if available) or by placing the calendar shortcode inside Elementor’s Shortcode widget.

1. Open the page in Elementor.
2. Search for a WP Booking System widget or “Shortcode”.
3. If a WP Booking System widget is available, add it and select your calendar (and form, if applicable).
4. If not, add Elementor’s Shortcode widget and paste the calendar shortcode.
5. Click Update.

If you are embedding inside a popup or a template, use the same shortcode approach and test the page on the front-end to make sure the calendar loads correctly.

Use the shortcode method (recommended)

The shortcode method works in Gutenberg, Elementor, Classic Editor, and most builders. You paste one shortcode on the page and the calendar will render automatically on the front-end.

Calendar + booking form (accept bookings)

[wpbs id="1" form_id="1"]

Replace id with your calendar ID and form_id with your form ID.

Availability only (no booking form)

[wpbs id="1"]

If you embed the calendar without a form_id, visitors can view availability but cannot submit bookings.

Where to paste the shortcode

• Gutenberg: paste it into a Shortcode block.
• Elementor: paste it into the Shortcode widget.
• Classic Editor: paste it into the editor (Text view is safest).

Test your booking flow

1. Open the page in an incognito/private window.
2. Select a date range (or single date, depending on your setup).
3. If you attached a form, submit a test booking using a real email address.
4. Check that the booking appears in the admin area and that availability behaves as expected.

Tip: Test on mobile as well, especially if your page builder uses custom responsive settings.

Common issues (and quick fixes)

The calendar is visible in the editor but not on the front-end

• Clear page cache and any plugin cache, then reload the page.
• Temporarily disable minification/optimization features and test again.
• Make sure you published/updated the page after adding the shortcode/widget.

The shortcode shows as plain text instead of rendering

• Make sure you used a Shortcode block/widget, not a normal paragraph/text widget.
• In some builders, use the dedicated shortcode element rather than a text element.
• Confirm the plugin is active and you used the correct shortcode format.

The calendar styling looks broken inside the builder theme

• Theme CSS can override plugin styles; test with a default theme to confirm.
• Reduce broad CSS rules that target tables, inputs, or form elements globally.
• Apply small targeted CSS overrides to the calendar container instead of global styles.

Bookings submit but availability does not update

• Confirm your booking settings include automatic blocking of booked dates if you want to prevent double bookings.
• If you use inventory rules or external calendar sync, confirm those are configured correctly.
• Submit one booking and verify the booking status rules match your workflow (pending vs accepted).

Best practices

• Use one dedicated page for booking, such as /booking/ or /book-now/, and link to it from your navigation.
• Add a short intro above the calendar explaining what is being booked and what happens after submission.
• Keep the form short and only ask for the information you truly need.
• Test after any theme update, builder update, or optimization plugin change.

Mini FAQ

Which method is best: widget/block or shortcode?

If a widget/block is available, it can be easier to configure, but the shortcode is the most universal and reliable because it works in almost every editor and builder.

Can I embed the calendar in an Elementor template or popup?

Yes. Use the shortcode widget inside the template or popup and test the front-end to ensure the calendar loads correctly in that context.

Can I embed multiple calendars on one page?

Yes, but only do this if it makes sense for your visitors. Multiple calendars can slow the page down and may confuse users, so consider using separate pages or a clear layout with headings.