---
title: "Embed the booking calendar on your own website"
description: "How to embed the My Playrooms calendar widget on your own website: show availability and accept bookings directly through My Playrooms."
canonical_url: "https://www.my-playrooms.de/en/content/calendar-widget"
---

# Embed the booking calendar on your own website

The **calendar widget** shows your playroom's availability directly on your own website. Visitors see free and booked days and can start a booking with one click. The booking itself still runs through My Playrooms, including payment, confirmation and management in your host area. No programming needed, a small HTML snippet is enough.

## Requirements

- Your playroom is published on My Playrooms.
- You know your playroom's **URL path**: the last part of your listing's address, e.g. `FlairVita` in `https://www.my-playrooms.de/playrooms/FlairVita`.
- You can add custom HTML to your website (e.g. via an "HTML block" or "custom HTML" element in your website builder or CMS).

## Embedding in two steps

**1. Add a placeholder** where the calendar should appear:

```html
<div
  class="myp-calendar-widget"
  data-months-to-show="2"
  data-server-frontend="https://www.my-playrooms.de"
  data-server-backend="https://api.my-playrooms.de"
  data-playroom-url-path="YOUR-URL-PATH"
></div>
```

**2. Load the script**, once per page, ideally right before the closing `</body>` tag:

```html
<script src="https://www.my-playrooms.de/calendar-widget/v2/script.js"></script>
```

Replace `YOUR-URL-PATH` with your playroom's URL path. That's all: the script finds every placeholder on the page and fills it with the calendar.

## Options

You control the behaviour with `data-` attributes on the placeholder:

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Required
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        class="myp-calendar-widget"
      </code>
    </td>
    
    <td>
      yes
    </td>
    
    <td>
      Marks the element as a calendar. Nothing happens without this class.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-playroom-url-path
      </code>
    </td>
    
    <td>
      yes
    </td>
    
    <td>
      Your playroom's URL path, e.g. <code>
        FlairVita
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-server-backend
      </code>
    </td>
    
    <td>
      yes
    </td>
    
    <td>
      Always <code>
        https://api.my-playrooms.de
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-server-frontend
      </code>
    </td>
    
    <td>
      yes
    </td>
    
    <td>
      Always <code>
        https://www.my-playrooms.de
      </code>
      
      . The booking link points here.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-months-to-show
      </code>
    </td>
    
    <td>
      no
    </td>
    
    <td>
      Number of months shown at once. Default: <code>
        2
      </code>
      
      . Use <code>
        1
      </code>
      
       for narrow columns.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-disable-booking-link
      </code>
    </td>
    
    <td>
      no
    </td>
    
    <td>
      <code>
        true
      </code>
      
       shows availability only; days are not clickable (a pure occupancy calendar).
    </td>
  </tr>
</tbody>
</table>

## What visitors see

- The calendar starts at the current month; arrows let visitors page back and forth. If the current month has no free days, it automatically jumps to the next month with availability.
- **Free days** are marked as available and show the earliest check-in time ("ab 15:00"), **booked days** are marked accordingly. Today is highlighted.
- Clicking a free day opens the **My Playrooms booking flow in a popup window**, with the arrival date and matching booking type prefilled. When the popup closes, visitors are back on your page.
- With `data-disable-booking-link="true"` days stay non-clickable, which is useful if you only want to inform.

## Multiple playrooms or calendars

You can use several placeholders on the same page, also for different playrooms. The script is still included only **once**:

```html
<div
  class="myp-calendar-widget"
  data-playroom-url-path="PlayroomA"
  data-months-to-show="1"
  data-server-frontend="https://www.my-playrooms.de"
  data-server-backend="https://api.my-playrooms.de"
></div>

<div
  class="myp-calendar-widget"
  data-playroom-url-path="PlayroomB"
  data-months-to-show="1"
  data-server-frontend="https://www.my-playrooms.de"
  data-server-backend="https://api.my-playrooms.de"
></div>

<script src="https://www.my-playrooms.de/calendar-widget/v2/script.js"></script>
```

## Notes and troubleshooting

- **Allow popups:** The booking flow opens in a popup. If the browser blocks popups for your site, a notice asks visitors to allow them.
- **The calendar doesn't appear:** Check that the `myp-calendar-widget` class is set, the URL path matches exactly (case-sensitive) and the script is included. If a required attribute is missing, the widget shows "Fehlende Konfiguration für den Kalender" (missing calendar configuration).
- **Website builders:** Some builders strip `<script>` tags from plain text fields. Use an element for custom HTML/JavaScript instead, or add the script in the page footer area.
- **Freshness:** The calendar loads availability live from My Playrooms on every page view, so changes to your occupancy calendar (including imported calendars) show up without further action.
- **Language:** Labels and the booking flow in the popup are currently German.
- **Version:** Use `/calendar-widget/v2/script.js`. The older `/calendar-widget/script.js` stays reachable for compatibility but is no longer developed and expects a single element with the ID `myp-calendar-widget` instead of a class (one calendar per page).
- **Design:** The calendar ships with a neutral default style and adapts to the width of its container. Place it in a fixed-width element if needed.

Questions about embedding? Get in touch, we're happy to help.