URL parameters

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

Available onFreePlusPro

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

HTML

<div
  class="rentalbeam-calendar"
  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

HTML

<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	light	Force light or dark mode, or follow the parent page
force-refresh	boolean	true	-	Bypass the server cache and fetch fresh data on load

Dark mode

Set theme=auto to follow the parent page color scheme automatically. You can also control it programmatically from the parent page using postMessage:

JavaScript

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

Custom colors (available, booked, closed, background) are configured in the dashboard under Calendars - Appearance and require a Plus or Pro plan. They are not URL parameters - see Colors & managed dates.