How-To Guide
6 min read
Updated April 2026
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 and where to put the calendar on the page.
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 click Add rental.
- 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://cdn.rentalbeam.com/v1/embed.js" async></script> <div class="rentalbeam-calendar" data-rental-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 sized to your page.
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 button so guests can check dates and act without scrolling back up.
- After changing the 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 sized to your page.
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 button so guests can check dates and act without scrolling back up.
- After changing the 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.Troubleshooting
Related guides
How to show availability on your vacation rental websiteHow to sync your Airbnb calendar with your websiteHow to accept direct bookings from your vacation rental websiteHow to add an availability calendar to your Wix vacation rental websiteHow to add an availability calendar to your Squarespace vacation rental websiteHow to add an availability calendar to your Webflow vacation rental websiteHow to add an availability calendar to your Weebly vacation rental websiteHow to add an availability calendar to your GoDaddy vacation rental websiteHow to add an availability calendar to your Framer vacation rental websiteHow to add an availability calendar to your Google Sites vacation rental websiteHow to add an availability calendar to your Hostinger vacation rental websiteHow to add an availability calendar to your Carrd vacation rental websiteHow to add an availability calendar to your Jimdo vacation rental websiteHow to add an availability calendar to your Duda vacation rental websiteHow to add an availability calendar to your Strikingly vacation rental websiteHow to add an availability calendar to your Webnode vacation rental websiteHow to add an availability calendar to your IONOS vacation rental websiteHow to add an availability calendar to your SITE123 vacation rental websiteHow to add an availability calendar to your Zoho Sites vacation rental websiteHow to add an availability calendar to your Webador vacation rental websiteHow to add an availability calendar to your one.com vacation rental websiteHow to add an availability calendar to your Square Online vacation rental websiteHow to add an availability calendar to your Yola vacation rental websiteHow to add an availability calendar to your Mozello vacation rental website
