<tl-occurrence-selector>
| 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.
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" | "list" | "slots" | undefined | undefined |
eventId (required) | event-id | Event ID to fetch occurrences for | string | undefined |
orientation | orientation | Layout orientation (auto = horizontal on desktop, vertical on mobile) | "auto" | "horizontal" | "vertical" | 'auto' |
theme | -- | Theme configuration | TlOccurrenceSelectorTheme | undefined | undefined |
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>