How to add an availability calendar to your Duda vacation rental website
A Duda site can show guests which dates are open, synced from Airbnb, Vrbo and Booking.com. Duda's HTML widget runs JavaScript loaded over HTTPS, so the script embed is the recommended path and the calendar sizes itself. Custom code needs a Duda Team plan or higher, so if an agency built your site, they may be the one to add it.
Why add a calendar to your Duda 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 Duda site on a Team plan or higher, or an agency that can edit it
- 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 Duda
RentalBeam recommends the script embed for Duda. 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>Duda's HTML widget runs JavaScript loaded over HTTPS, so the script embed keeps the calendar sized to its content.
Duda publishing reminders
- Custom code needs a Duda Team plan or higher. If an agency built your site, ask them to add the widget.
- Give the HTML widget a column of its own, as Duda recommends for custom code.
- Judge the result on the preview or the live page rather than inside the editor.
- 3
Paste the embed into Duda
Builder-specific install steps
Use these steps to place the RentalBeam calendar exactly where guests check dates.
Recommended: ScriptDuda
Drag in the HTML widget and paste the script snippet. Custom code needs a Duda Team plan or higher.
Duda's HTML widget runs JavaScript loaded over HTTPS, so the script embed keeps the calendar sized to its content.
Use the Script tab for this builder.
- Open the page in the Duda editor
- In the side panel choose Add, then Elements, search for HTML, and drag the HTML widget into its own row or column
- Open the widget's code and paste the RentalBeam calendar script snippet
- Publish, then check the calendar on the preview or the live page
Before you publish
- Custom code needs a Duda Team plan or higher. If an agency built your site, ask them to add the widget.
- Give the HTML widget a column of its own, as Duda recommends for custom code.
- Judge the result on the preview or the live page rather than inside the editor.
- 4
Publish and verify the guest experience
Where to place the calendar on the page
- Give the HTML widget a column of its own, as Duda recommends for custom code.
- Place it next to your booking or inquiry button so guests can act right after checking dates.
- Judge the result on the preview or the live page rather than inside the editor.
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.