How to add an availability calendar to your Framer vacation rental website
Framer can show a clean, guest-facing availability calendar without a full PMS or a custom app build. Framer's Embed component runs scripts on the published site, so the standard script embed is the recommended path: drop in an Embed component, set its Type to HTML, paste the snippet, then publish and confirm on the live site, because embeds may not fully render on the editor canvas.
Why add a calendar to your Framer 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 Framer page you can edit
- Your RentalBeam calendar widget
- At least one connected OTA or iCal availability 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 Framer
RentalBeam recommends the script embed for Framer. 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>Framer's Embed component runs scripts on the published site, so the script embed keeps the calendar responsive at the width you give the component. Embeds may not fully render on the editor canvas, so you confirm the result on the published URL.
Framer publishing reminders
- Use the Embed component for the widget. Project Settings, then Custom Code, is for head and body scripts such as analytics, not for something guests need to see.
- Embeds may not fully render on the editor canvas. Publish and open the live URL before assuming the embed failed.
- If a script is ever stripped, set the same component's Type to URL and paste the iframe snippet instead.
- 3
Paste the embed into Framer
Builder-specific install steps
Use these steps to place the RentalBeam calendar exactly where guests check dates.
Recommended: ScriptFramer
Drop in an Embed component set to HTML and paste the script snippet; check the published site, not the canvas.
Framer's Embed component runs scripts on the published site, so the script embed keeps the calendar responsive at the width you give the component. Embeds may not fully render on the editor canvas, so you confirm the result on the published URL.
Use the Script tab for this builder.
- Open the page in the Framer editor
- From the Insert menu, search for Embed and drag the Embed component onto the canvas where the calendar should sit
- In the component properties, switch Type to HTML and paste the RentalBeam script embed - both the script tag and the calendar div
- Size the component width to your column, leave the height on auto, then publish and confirm on the live site
Before you publish
- Use the Embed component for the widget. Project Settings, then Custom Code, is for head and body scripts such as analytics, not for something guests need to see.
- Embeds may not fully render on the editor canvas. Publish and open the live URL before assuming the embed failed.
- If a script is ever stripped, set the same component's Type to URL and paste the iframe snippet instead.
- 4
Publish and verify the guest experience
Where to place the calendar on the page
- Place the Embed component next to your booking or inquiry button so guests can act right after checking dates.
- Give the component the full column width and leave the height on auto so the month grid is not squeezed on mobile.
- If the calendar does not appear on the editor canvas, publish and open the live site. Embeds may not fully render while you are designing.
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.