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-CALENDAR-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-CALENDAR-ID?months-per-row=3&rows=2&theme=dark"
width="100%"
height="700"
frameborder="0"
></iframe>Parameter reference
| Parameter | Type | Range | Default | Description |
|---|---|---|---|---|
| months-per-row | integer | 1 - 15 | 3 | Number of month columns rendered side by side |
| rows | integer | 1 - 15 | 1 | Number of rows of months to show |
| month-scale | float | 0.8 - 1.6 | 1.0 | Scale multiplier for each month card |
| offset | integer | 0+ | 0 | Start this many months in the future instead of the current month |
| theme | string | light | dark | auto | auto | Force light or dark, or (auto) match the website the widget is embedded on |
| force-refresh | boolean | true | - | Bypass the server cache and fetch fresh data on load |
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'
);<script> tags. If the relay script is removed, the iframe still renders - set theme=light or theme=dark in the URL to match your site, and it keeps a fixed height. Where scripts are allowed, the script embed adapts to your page theme and height automatically.