How to add an availability calendar to your WordPress vacation rental website
Use RentalBeam to place a live availability calendar on your WordPress website so guests can check open dates before they inquire. This guide covers the fastest setup path, the recommended embed mode, and where to position the calendar for better direct-booking conversions.
Why add a calendar to your WordPress site?
Guests want to know whether your property is available before they click through to a form or send a message. A visible availability calendar shortens that decision path, reduces repetitive date questions, and supports a cleaner direct-booking flow on your own site.
- Show booked and open dates directly on your website
- Keep using Airbnb, VRBO, Booking.com, or any other iCal-compatible source
- Reduce back-and-forth date questions from guests
- Prepare the page for a future direct-booking widget beside the calendar
What you need
- A WordPress page you can edit
- Your RentalBeam calendar widget
- At least one connected iCal source such as Airbnb or VRBO
Keep setup simple first
Start with one property page, confirm the calendar is visible and accurate, then roll the same pattern across the rest of your site.Setup steps
- 1
Create your RentalBeam calendar
- Open your RentalBeam dashboard and create a calendar.
- Paste your Airbnb, VRBO, Booking.com, or other iCal source URLs.
- Check the preview so blocked dates already look correct before you embed anything.
Works with any iCal source
RentalBeam supports any iCal/ICS URL, not just Airbnb. You can merge multiple availability sources into one guest-facing calendar view. - 2
Copy the right embed code for WordPress
RentalBeam recommends the script embed for WordPress. Use the matching code format below as your reference.
html<script src="https://rentalbeam.com/api/rentalbeam-calendar.js" async></script> <div class="rentalbeam-calendar" id="your-calendar-id" data-months-per-row="3" data-rows="1" data-month-scale="1"></div>WordPress supports the full script embed, which keeps the calendar responsive and closer to the default RentalBeam experience.
WordPress publishing reminders
- Paste the embed into a Custom HTML block, not a Paragraph block, so WordPress does not escape the code.
- Keep the calendar close to your main inquiry or booking CTA so guests can check dates and act without scrolling back up.
- After changing months-per-row, rows, or month size in RentalBeam, copy the updated embed and re-open the live preview so the published layout matches the current settings.
- 3
Paste the embed into WordPress
Builder-specific install steps
Use these steps to place the RentalBeam calendar exactly where guests check dates.
Recommended: ScriptWordPress
Best fit when you can add a Custom HTML block or plugin.
WordPress supports the full script embed, which keeps the calendar responsive and closer to the default RentalBeam experience.
Use the Script tab for this builder.
- Edit the page where guests check availability
- Add a Custom HTML block
- Paste the RentalBeam calendar embed code
- Preview the page and publish the update
Before you publish
- Paste the embed into a Custom HTML block, not a Paragraph block, so WordPress does not escape the code.
- Keep the calendar close to your main inquiry or booking CTA so guests can check dates and act without scrolling back up.
- After changing months-per-row, rows, or month size in RentalBeam, copy the updated embed and re-open the live preview so the published layout matches the current settings.
- 4
Publish and verify the guest experience
Where to place the calendar on the page
- Place the calendar near your main Book Now button or inquiry CTA.
- Keep surrounding copy short so the month grid stays the focal point.
- Preview the page on mobile before publishing so the calendar spacing feels natural.
Think of the calendar as a conversion aid
Competitor guides consistently put availability close to the main inquiry or direct-booking action. That pattern reduces friction because guests can check dates and act in the same visual area.