# booking-calendar

> Shows the slots of a bookable product (its Booking schedule, set in the Shopify admin) for days days, the places left of each, the day in the site's language and the time in the place's time zone; picking a free slot books it as its container says. In a booking-form: the form books it. In a product's add to cart: adding the product holds the slot for the quantity and writes it on the product's lines (a paid appointment); no slot or a full one stops the addition with the message, and an addition that does not get in (Shopify refuses it) gives the slot back. In the cart: the picked slot is written on the cart (a pickup or delivery window) and held only when the visitor checks out, so picking holds no place; a slot taken by someone else meanwhile stops the checkout, with the message in [booking="error"], and with data-required the checkout stops until a slot is picked. The places are counted by Smootify: two visitors cannot book the last one. The availability is kept a minute, so pages opened again ask nothing.

Status: Ready (Smootify 2.0)  
Plan: Server plan  
Add-on: Booking  
URL: https://www.smootify.io/docs/reference/elements/booking-calendar  
Updated: 2026-10-13

## Where it can go

- **Inside any of:** [`booking-form`](https://www.smootify.io/docs/reference/elements/booking-form), [`smootify-add-to-cart`](https://www.smootify.io/docs/reference/elements/smootify-add-to-cart), [`smootify-product`](https://www.smootify.io/docs/reference/elements/smootify-product), [`smootify-cart`](https://www.smootify.io/docs/reference/elements/smootify-cart).
- **Must contain** `[booking="day"] [booking="slot"]`.
- **Out of place,** Smootify removes it from the page: also on a site whose licence has no “Booking”; logs an error without a [booking=“day”] template.

## What it requires

- The **server plan**: on other plans Smootify removes the element from the page.
- The **Booking** extension (server plan, the extension activated in the Smootify dashboard, the licensed domain). Without it, its markup is removed from the page.

## Attributes on the element

- **It reads** `data-product-id`, `days`, `property`, `data-required`, `data-error-required`.
- **Smootify writes** `is-loading`, `is-error`, `has-selection`, `is-not-bookable`, `.w-condition-invisible`, `[tagged="bookable"]` on it: do not set them yourself.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Booking](https://www.smootify.io/docs/reference/attributes/booking) | `booking` | 12 |
| [Booking days](https://www.smootify.io/docs/reference/attributes/booking-nav) | `data-action` | 2 |