If you build websites for cottages, guest houses, or other short-term rentals, one question appears on almost every project:

How can guests see availability without turning the website into a full booking platform?

A small hosted calendar is often enough. The property owner maintains the dates in one place, while the website displays a read-only view of available, pending, and booked periods.

This tutorial shows two ways to add that kind of calendar: a WordPress shortcode and a plain HTML embed.

What we are building

The finished page should:

  • show availability without storing booking data in the CMS;
  • work on mobile screens;
  • distinguish available, pending, and booked dates;
  • load lazily so it does not delay the rest of the page;
  • have an accessible title for screen readers.

You can see an illustrative availability-calendar demo before implementing it. The dates in that demo are intentionally fictional.

Option 1: use the WordPress plugin

The quickest WordPress setup uses the open-source Shared House booking calendar plugin.

  1. Create a listing and note its numeric ID.
  2. Install and activate the plugin.
  3. Open Settings → Shared House.
  4. Enter the listing ID, language, and season-legend preference.
  5. Add the calendar to a page with this shortcode: 
[shared_house]

You can override the defaults for a specific page:

[shared_house numero="132" langue="en" saisons="avec"]

The example uses listing 132, which is the demonstration listing. Replace it with the property owner's listing number.

The calendar supports French, English, Dutch, Spanish, German, and Finnish. Dates remain managed on Shared House; the WordPress plugin only renders the hosted calendar.

Option 2: add a plain HTML embed

For a static site or a custom CMS, an iframe keeps the integration small:

<div class="availability-calendar"> <iframe src="https://www.shared-house.com/embed.php?id=132&lang=en&view=month&seasons=1" title="Holiday rental availability calendar" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" width="320" height="430" ></iframe> </div>

Add a little CSS so the embed fits narrow layouts:

.availability-calendar { max-width: 320px; margin-inline: auto; } .availability-calendar iframe { display: block; width: 100%; max-width: 320px; border: 0; }

Change the id and lang query parameters for the property. Set seasons=0 when the seasonal legend is not needed.

Keep the integration useful and trustworthy

A calendar is only helpful when visitors understand what it represents.

Label fictional demonstrations

If you publish a sample calendar, say clearly that its dates are illustrative. A visitor should never confuse demo data with the availability of a real property.

Give the iframe a meaningful title

Avoid an empty title attribute. “Holiday rental availability calendar” tells assistive technology what the embedded content contains.

Keep an ordinary link as a fallback

An iframe can be blocked by a privacy extension or a restrictive Content Security Policy. Add a normal link near it so the calendar remains reachable:

<p> <a href="https://www.shared-house.com/index_booking_calendar.php"> Create a free availability calendar for a holiday rental </a> </p>

The free Shared House availability calendar provides the listing and calendar ID used by both integrations.

Do not treat availability as a confirmed booking

The calendar communicates dates. A reservation still needs the owner's normal enquiry or booking workflow. Keep that distinction explicit in the surrounding copy.

A compact implementation checklist

Before shipping, check that:

  • the property ID is correct;
  • the language matches the page;
  • the iframe has a descriptive title;
  • the layout works at 320 CSS pixels;
  • a visible fallback link is present;
  • demonstration dates are labelled as fictional;
  • the owner knows where to update availability.

That is enough for a focused availability page without adding a database, a custom calendar UI, or booking logic to the website itself.