<sessions-schedule>Renders the same schedule shown on a business’s public Sessions page. Includes filters, day/week/month toggles, and a sign-in flow that lets visitors register without leaving the host page when an auth token is supplied. The week view is a time grid — hours down the left, each session positioned at its real start and end — matching the public page; use week-start-time / week-end-time to fix which hours it shows instead of letting it size itself to the sessions. Set structure="booking" to present booking mode — a “what to book” chooser over a drag-to-select availability grid — for businesses that take appointments.
Install
<script type="module" src="https://go.sessions.website/embeds/unstable/schedule.js"></script>
<sessions-schedule
business="still-water-yoga-demo"
>
<div class="sx" aria-hidden="true"><style>.sx{--sx-fill:color-mix(in srgb,var(--sessions-color-surface-primary-text,var(--sessions-text,#111)) 10%,transparent);--sx-cell:color-mix(in srgb,var(--sessions-color-surface-primary-text,var(--sessions-text,#111)) 2%,transparent);--sx-rule:color-mix(in srgb,var(--sessions-color-surface-primary-text,var(--sessions-text,#111)) 5%,transparent);display:block;color-scheme:var(--sessions-color-scheme,light)}.sx *{box-sizing:border-box}.sx-bar{display:block;border-radius:.25rem;background:var(--sx-fill);animation:sx-pulse 1.6s ease-in-out infinite}.sx-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--sx-rule);overflow:hidden;border-radius:.5rem}.sx-head{padding:.5rem;text-align:center;background:var(--sx-cell)}.sx-head .sx-bar{height:.55rem;width:1.5rem;margin:0 auto}.sx-cell{min-height:5.5rem;padding:.375rem;background:var(--sx-cell);display:flex;flex-direction:column;gap:.25rem}.sx-dot{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--sx-fill)}.sx-cols{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--sx-rule);overflow:hidden;border-radius:.5rem}.sx-col{background:var(--sx-cell);display:flex;flex-direction:column}.sx-colhead{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem .25rem}.sx-colbody{display:flex;flex-direction:column;gap:2px;padding:.25rem;flex:1}.sx-entry{height:2.25rem;border-radius:.25rem;background:var(--sx-fill);animation:sx-pulse 1.6s ease-in-out infinite}.sx-rows{display:flex;flex-direction:column;background:var(--sx-cell);border-radius:.5rem;overflow:hidden}.sx-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr);align-items:center;column-gap:1rem;padding:.75rem 1rem;min-height:3.25rem}.sx-row+.sx-row{border-top:1px solid var(--sx-rule)}.sx-main{display:flex;flex-direction:column;gap:.3125rem;min-width:0}.sx-staff{display:flex;align-items:center;gap:.5rem;min-width:0}.sx-avatar{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--sx-fill);flex-shrink:0;animation:sx-pulse 1.6s ease-in-out infinite}.sx-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.75rem}.sx-toolbar .sx-bar{height:1rem}@keyframes sx-pulse{0%,100%{opacity:.55}50%{opacity:1}}@media (prefers-reduced-motion:reduce){.sx-bar,.sx-entry,.sx-avatar{animation:none;opacity:.7}}</style><div class="sx-toolbar"><span class="sx-bar" style="width:7rem;height:1rem"></span><span style="display:flex;gap:.375rem"><span class="sx-bar" style="width:2.25rem;height:1.5rem"></span><span class="sx-bar" style="width:2.25rem;height:1.5rem"></span><span class="sx-bar" style="width:2.25rem;height:1.5rem"></span></span></div><div class="sx-cols"><div class="sx-col"><div class="sx-colhead"><span class="sx-bar" style="width:1.25rem;height:.5rem"></span><span class="sx-dot" style="width:1.625rem;height:1.625rem"></span></div><div class="sx-colbody"><span class="sx-entry"></span><span class="sx-entry"></span></div></div><div class="sx-col"><div class="sx-colhead"><span class="sx-bar" style="width:1.25rem;height:.5rem"></span><span class="sx-dot" style="width:1.625rem;height:1.625rem"></span></div><div class="sx-colbody"><span class="sx-entry"></span></div></div><div class="sx-col"><div class="sx-colhead"><span class="sx-bar" style="width:1.25rem;height:.5rem"></span><span class="sx-dot" style="width:1.625rem;height:1.625rem"></span></div><div class="sx-colbody"><span class="sx-entry"></span><span class="sx-entry"></span><span class="sx-entry"></span></div></div><div class="sx-col"><div class="sx-colhead"><span class="sx-bar" style="width:1.25rem;height:.5rem"></span><span class="sx-dot" style="width:1.625rem;height:1.625rem"></span></div><div class="sx-colbody"><span class="sx-entry"></span><span class="sx-entry"></span></div></div><div class="sx-col"><div class="sx-colhead"><span class="sx-bar" style="width:1.25rem;height:.5rem"></span><span class="sx-dot" style="width:1.625rem;height:1.625rem"></span></div><div class="sx-colbody"><span class="sx-entry"></span></div></div><div class="sx-col"><div class="sx-colhead"><span class="sx-bar" style="width:1.25rem;height:.5rem"></span><span class="sx-dot" style="width:1.625rem;height:1.625rem"></span></div><div class="sx-colbody"></div></div><div class="sx-col"><div class="sx-colhead"><span class="sx-bar" style="width:1.25rem;height:.5rem"></span><span class="sx-dot" style="width:1.625rem;height:1.625rem"></span></div><div class="sx-colbody"><span class="sx-entry"></span><span class="sx-entry"></span></div></div></div></div>
</sessions-schedule>Attributes
Edit any attribute below — the snippet above and the live preview to the side rebuild in place.
business : stringHandle of the business whose schedule should be shown, without the leading @. Optional when a wrapping <sessions-context business="…"> already provides it.
structure : schedule | bookingWhich surface to present. schedule (default) shows the session calendar. booking shows booking mode — a “what to book” chooser over a drag-to-select availability grid with Day, Week, and Month views — for businesses that take appointments.
auth : tokenOptional embed-scoped JWT issued via the business-pinned sign-in flow. When set, registration actions are taken on behalf of the token holder.
view : auto | day | week | monthCalendar view the schedule opens on. auto (default) picks the view from the business’s upcoming session density — Day for a packed daily grid, Week for a few classes a week, Month for sparse schedules — matching the server’s recommendedScheduleView. Set day, week, or month to force one. A view the visitor selects (remembered per persist) always wins over this default.
persist : storage | urlHow active filters are remembered across navigation. storage (default) uses sessionStorage; url writes filter state to the host page’s query string.
week-start-time : stringPins the first hour of the week view’s time axis. Write it 24-hour (08:00, 8) or 12-hour (8am, 8:30 AM, 8 a.m.) — a bare number is always 24-hour, so 20 is 8pm. Minutes round down to the hour that contains them. The week view always shows a time grid with the hours down the left — by default that axis sizes itself to the week’s sessions (or, in booking mode, to the activity’s booking hours), and this fixes it instead, so the same hours are shown every week. A session outside the pinned window is clamped to the nearest edge rather than hidden. Unparseable values are ignored.
week-end-time : stringPins the last hour of the week view’s time axis, in the same formats as week-start-time (21:00, 21, 9pm); minutes round up to the enclosing hour, and 24:00 (or 12am) means midnight at the end of the day. Can be set on its own — the start of the axis then still fits the sessions.