This page embeds the real, built packages/widget calendar bundle against the live staging API — the same copy-paste snippet the dashboard's widget configurator emits, pointed at a real resource. It's read-only: availability and a per-night price hint, nothing else — there is no booking flow on this page (see thelive widget demo for that). Below it, a variants gallery shows the same embed with different data-* overrides, a full options reference, and the iCal feed pattern OTAs and personal calendars subscribe to.
Every calendar on this page is a genuinely separate, live instance — its own Shadow DOM, its own fetch to the same demo resource — not a screenshot or a mock.
Rendered live, inside a Shadow DOM, from the calendar API:GET /v1/resources/{id}/calendar?from=&to=, called with apk_live_… publishable key. Each night carries its status plus a per-night rate hint (priceHintMinorUnits) — shown compactly under the day number here (IDR). A pk_ key can never see who booked a night (no guest name, email, or reservation id) — that's sk_/operator-session only. Full response shape and embed contract: Calendar and iCal feeds.data-api-base is only needed here because this demo serves the calendar script from the docs site's own origin rather than the API's.
One script, one shared publishable key and resource, four different themes — mix and match data-accent, data-radius, data-font, anddata-lang to match your brand and audience. Each card below is a fully live, independent embed. Copy the <div> under the one you want; the<script> tag above only needs to appear once on your page no matter how many calendars you embed.
No overrides at all — the built-in theme: a blue accent, an 8px radius, the system font stack, English copy.
<div data-availability-calendar
data-key="pk_live_bYhQxZzEQPoSkf_lit9lBCjfQjUAeHv4xRZGxA7MsWA"
data-resource="0b89addf-714c-49a4-ba07-550d7510181c"
data-api-base="https://booking-engine.davidvalentino.com"
class="astro-3hnjwts3"
></div>data-accent alone. The nav buttons, today/selection ring, and focus outline all pick it up — the accessible foreground (white vs. near-black) is computed for you, never accepted as input.
<div data-availability-calendar
data-key="pk_live_bYhQxZzEQPoSkf_lit9lBCjfQjUAeHv4xRZGxA7MsWA"
data-resource="0b89addf-714c-49a4-ba07-550d7510181c"
data-api-base="https://booking-engine.davidvalentino.com"
data-accent="#059669"
class="astro-3hnjwts3"
></div>data-radius pushed to its max (16px) plus data-font="serif" — a softer, editorial feel for a boutique-property brand.
<div data-availability-calendar
data-key="pk_live_bYhQxZzEQPoSkf_lit9lBCjfQjUAeHv4xRZGxA7MsWA"
data-resource="0b89addf-714c-49a4-ba07-550d7510181c"
data-api-base="https://booking-engine.davidvalentino.com"
data-accent="#7c3aed"
data-radius="16"
data-font="serif"
class="astro-3hnjwts3"
></div>data-lang="id" — every label (month names, nav, availability states) switches to Indonesian. The only other locale currently supported; anything else falls back to English.
<div data-availability-calendar
data-key="pk_live_bYhQxZzEQPoSkf_lit9lBCjfQjUAeHv4xRZGxA7MsWA"
data-resource="0b89addf-714c-49a4-ba07-550d7510181c"
data-api-base="https://booking-engine.davidvalentino.com"
data-accent="#ea580c"
data-lang="id"
class="astro-3hnjwts3"
></div>Every data-* attribute the calendar embed reads, traced by hand from calendar-embed.ts and theme.ts — an invalid value never breaks the calendar, it falls back to the default with a console warning for the integrator (a visitor never sees the warning or a broken layout).
| Attribute | Values | Default | What it does |
|---|---|---|---|
| data-key | pk_live_… / pk_test_… | required | Publishable key. Availability + price-hint only — never PII, never money. |
| data-resource | a resource id (uuid) | required | Which resource's calendar to render. |
| data-api-base | an absolute origin | the <script> tag's own origin, else the current page's origin | Override where calendar requests are sent. Only needed when the script is served from a different origin than the API (this page's own case). |
| data-accent | a 6-digit hex color, e.g. #2563eb | #2563eb | Primary accent color. An accessible foreground (white or near-black) is always computed from it, never accepted as separate input. |
| data-radius | a number (px), clamped to 2–16 | 8 | Corner radius of the card, nav buttons, and day cells. |
| data-font | "system" | "serif" | "mono" | system | One of a closed set of on-device font stacks — no webfont is ever fetched. |
| data-density | "comfortable" | "compact" | comfortable | Internal padding density. |
| data-lang | "en" | "id" | en | UI copy language — month/weekday names, nav labels, availability states. |
| data-fallback-contact | an https:, mailto:, or tel: URL | none | Shown only if live availability fails to load, as an alternate way to reach you. Any other URL scheme is dropped with a console warning. |
Every resource also has a signed, revocable iCal feed URL. Paste it into Google Calendar, Outlook, or an OTA's "import a calendar" field, and it stays in sync — busy/free only, no guest names or contact details.
https://booking-engine.davidvalentino.com/v1/feeds/{your-feed-token}.ics{your-feed-token} is a placeholder — this demo does not mint a real feed token (that's a privileged, per-tenant action). Your operator contact gets the real one from the dashboard's calendar screen and can revoke it independently of any API key.