URL parameters

Tune the calendar layout, scale, and theme without touching the dashboard.

Parameters control layout, scale, and theme. With the script embed, pass them as data-* attributes. With the iframe embed, pass them as URL query parameters.

Script embed with parameters

<div
  class="rentalbeam-calendar"
  data-rental-id="YOUR-RENTAL-ID"
  data-months-per-row="3"
  data-rows="2"
  data-month-scale="1.1"
  data-theme="light"
></div>

Iframe embed with parameters

<iframe
  src="https://rentalbeam.com/embed/YOUR-RENTAL-ID?months-per-row=3&rows=2&theme=dark"
  width="100%"
  height="700"
  frameborder="0"
></iframe>

Parameter reference

Dark mode

With theme=auto (the default) the widget matches the website it is embedded on. It first looks for an explicit theme on your page - a data-theme, data-bs-theme, or a dark/lightclass on a parent element, the page, or the body - and if none is present it matches your page’s background color. It never uses the visitor’s operating-system setting, so the widget will not turn dark on a light site.

The script embed reads your page directly. An iframe embed cannot read the parent page across origins, so the snippet you copy from the dashboard includes a small relay script next to the iframe that forwards your page’s theme into it. You can also switch the theme yourself at any time using postMessage:

// Send from the parent page to switch the embedded calendar theme
iframe.contentWindow.postMessage(
  { type: 'rentalbeam-theme-change', theme: 'dark' },
  'https://rentalbeam.com'
);