How-To Guide
5 min read
Updated October 2026

How to add an availability calendar to your Hostinger vacation rental website

A Hostinger Website Builder site can show guests which dates are open, synced from Airbnb, Vrbo and Booking.com, without a PMS. The builder shows embedded code in a box you size with handles, and its own examples use an iframe, so the iframe snippet is the recommended path: drag in Embed code, paste the snippet, resize the box to fit, and update the website.

Why add a calendar to your Hostinger 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
RentalBeam availability calendar widget showing three months of live availability, with available dates in color and booked dates crosshatched
The RentalBeam availability widget: the same calendar you will place on your Hostinger site.

What you need

  • A Hostinger Website Builder 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. 1

    Create your RentalBeam calendar

    1. Open your RentalBeam dashboard and click Add rental.
    2. Paste your Airbnb, Vrbo, Booking.com, or other iCal source URLs.
    3. 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. 2

    Copy the right embed code for Hostinger

    RentalBeam recommends the iframe embed for Hostinger. Use the matching code format below as your reference.

    html
    <iframe src="https://rentalbeam.com/embed/your-calendar-id?months-per-row=3&rows=1&month-scale=1" width="100%" height="446" frameborder="0" loading="lazy" style="border: none; border-radius: 8px; display: block;"></iframe>

    The Hostinger Website Builder shows embedded code in a box you size with handles, and its own examples use an iframe, so the iframe snippet is the predictable choice.

    Hostinger publishing reminders

    • Embedded code may not show inside the editor. Use preview or the live page to judge it.
    • If the bottom of the calendar is cut off, drag the box taller. It keeps the size you give it.
    • Use the iframe snippet here. Hostinger can turn a pasted script into plain text, and the iframe needs no script to show.
  3. 3

    Paste the embed into Hostinger

    Builder-specific install steps

    Use these steps to place the RentalBeam calendar exactly where guests check dates.

    Hostinger

    Drag in the Embed code element, paste the iframe snippet, and resize the box to fit.

    Recommended: Iframe

    The Hostinger Website Builder shows embedded code in a box you size with handles, and its own examples use an iframe, so the iframe snippet is the predictable choice.

    Use the Iframe tab for this builder.

    1. Open your site in the Hostinger Website Builder
    2. Open Add elements on the left and drag Embed code onto the page
    3. Click the element, choose Enter code, paste the RentalBeam calendar iframe snippet, and click Embed code
    4. Drag the handles until the whole calendar shows, then update the website and check the live page

    Before you publish

    • Embedded code may not show inside the editor. Use preview or the live page to judge it.
    • If the bottom of the calendar is cut off, drag the box taller. It keeps the size you give it.
    • Use the iframe snippet here. Hostinger can turn a pasted script into plain text, and the iframe needs no script to show.
  4. 4

    Publish and verify the guest experience

Where to place the calendar on the page

  • Drop the Embed code element right above your booking or inquiry button so guests can act as soon as they have checked dates.
  • Drag the handles until the whole calendar shows. The box keeps the size you give it.
  • Embedded code may not show inside the editor, so judge the result in preview or on the live page.

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

Hostinger calendar questions

Can I use RentalBeam on Hostinger?

Yes. RentalBeam works on Hostinger with a standard embed flow, so you can publish live availability without a full PMS or a custom site rebuild.

Should I use a script or iframe on Hostinger?

The Hostinger Website Builder shows embedded code in a box you size with handles, and its own examples use an iframe, so the iframe snippet is the predictable choice. In practice, iframe is the best default for Hostinger.

Will this sync with Airbnb, Vrbo, and Booking.com?

Yes. RentalBeam supports any iCal URL, so you can import Airbnb, Vrbo, Booking.com, Google Calendar, and other compatible sources into one calendar.

Do I need a property management system?

No. RentalBeam is for hosts who want synced availability and direct-booking tools without paying for a full PMS stack.

rentalbeam.com/dashboard/rentals/6f1d2c4e-3b7a-4c58-9e21-8a0f5d7b2c19/widgets/calendar
A rental's Calendar widget section: a live three-month preview, its embed code, and the color presets below

Add your Hostinger availability calendar today

Create your RentalBeam calendar, connect your OTA feeds, and publish a guest-friendly availability view on your own website in minutes.