Reference
<tl-occurrence-selector>
A smart occurrence selector component that fetches and displays event occurrences from the Ticketlayer API.
| HTML tag | <tl-occurrence-selector> |
| React | import { TlOccurrenceSelector } from '@ticketlayer/elements-react' |
| Category | Discovery |
| Runs in | web (browser DOM) |
A smart occurrence selector component that fetches and displays event occurrences from the Ticketlayer API.
A smart occurrence selector component that fetches and displays event occurrences from the Ticketlayer API.
Features#
- Automatic data fetching - Fetches occurrences via the Ticketlayer SDK
- Adaptive display modes - Automatically chooses list, slots, or calendar view based on occurrence count
- Loading & error states - Built-in spinner and error handling with retry
- Responsive - Works on mobile and desktop with auto-adjusting layouts
- Themeable - Fully customizable via CSS custom properties
Usage#
import { TlOccurrenceSelector } from '@ticketlayer/elements-react';
<TlOccurrenceSelector
eventId="evt_001"
onTlSelect={(e) => console.log('Selected:', e.detail.occurrence)}
/>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
displayMode | display-mode | Force a specific display mode (auto-detected if not set) | "calendar" | "calendar-slots" | "dates" | "list" | "slots" | undefined | undefined |
eventId (required) | event-id | Event ID to fetch occurrences for | string | undefined |
occurrenceId | occurrence-id | The occurrence already picked: the element opens on its day and marks it | string | undefined | undefined |
orientation | orientation | Layout orientation (auto = horizontal on desktop, vertical on mobile) | "auto" | "horizontal" | "vertical" | 'auto' |
theme | -- | Theme configuration | TlOccurrenceSelectorTheme | undefined | undefined |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-occurrence-selector__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlSelect | Emitted when an occurrence is selected | CustomEvent<{ occurrence: TlOccurrence; }> |
Events are CustomEvents; the payload is on event.detail. In HTML, listen with element.addEventListener('tlXxx', handler); in React the wrapper exposes each one as an onTlXxx prop.
Related elements#
Used by: <tl-buy-modal>