How to add an availability calendar to your Weebly vacation rental website
Weebly can show a clean, guest-facing availability calendar without a full PMS or a custom app build. Weebly's Embed Code element accepts JavaScript, so the standard script embed is the recommended path - paste it into an Embed Code element, then publish and check the live page, since Weebly does not preview embedded scripts in the editor.
Why add a calendar to your Weebly 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 Weebly 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 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 Weebly
RentalBeam recommends the script embed for Weebly. 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>Weebly's Embed Code element accepts custom JavaScript, so the standard script embed works and keeps the calendar responsive with no fixed height - the closest match to the native RentalBeam look. Weebly does not preview embedded scripts in the editor, so you confirm it on the published page.
Weebly publishing reminders
- Use the dedicated Embed Code element from the Build panel, not a Text element, so Weebly does not strip the script tag.
- Weebly does not render embedded scripts in the editor preview - this is expected. Always publish and check the live page before assuming the embed failed.
- If your plan or theme ever strips the script, switch to the iframe snippet, which renders without JavaScript. Advanced: place the script in Settings, then SEO, then Footer Code, and keep only the calendar div in the Embed Code element.
- 3
Paste the embed into Weebly
Builder-specific install steps
Use these steps to place the RentalBeam calendar exactly where guests check dates.
Recommended: ScriptWeebly
Use the Embed Code element with the script snippet - it accepts JavaScript. Embedded scripts show only on the published site, not in the Weebly editor.
Weebly's Embed Code element accepts custom JavaScript, so the standard script embed works and keeps the calendar responsive with no fixed height - the closest match to the native RentalBeam look. Weebly does not preview embedded scripts in the editor, so you confirm it on the published page.
Use the Script tab for this builder.
- In the Weebly editor, open the page where guests check availability
- From the Build panel on the left, drag an Embed Code element onto the page
- Click the element, choose Edit Custom HTML, and paste the RentalBeam script embed - both the script tag and the calendar div
- Publish the site, then open the live page to confirm the calendar (Weebly does not preview embedded scripts in the editor)
Before you publish
- Use the dedicated Embed Code element from the Build panel, not a Text element, so Weebly does not strip the script tag.
- Weebly does not render embedded scripts in the editor preview - this is expected. Always publish and check the live page before assuming the embed failed.
- If your plan or theme ever strips the script, switch to the iframe snippet, which renders without JavaScript. Advanced: place the script in Settings, then SEO, then Footer Code, and keep only the calendar div in the Embed Code element.
- 4
Publish and verify the guest experience
Where to place the calendar on the page
- Drag the Embed Code element near your booking or inquiry button so guests can act right after checking dates.
- If the calendar does not show in the Weebly editor, publish the site and check the live page - that is normal Weebly behavior, not a broken embed.
- Give the embed its own row so Weebly columns do not squeeze the month grid on mobile.
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.