Time Zone Aware Slots

ProNew

Host availability stored in the host's time zone and shown in the visitor's chosen zone, with a next-day or previous-day marker when the date shifts. Use this when a host in one time zone offers slots to people in others and nobody should do the maths.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

date

hostZone

Guide and examples

When to use it

Use it when a host in one time zone offers slots to people in others and nobody should do the maths.

Do not use it when everyone is in one zone; use time-slot-picker.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
date	string	-	Host-local day, ISO.
hostZone	string	Europe/Berlin	IANA zone of the host.
zones	string[]	6 common zones	Zones the visitor can pick.
slots	string[]	09:00-16:30	Host-local start times.
onValueChange	`(choice: { hostTime; viewerTime; zone } \| null) => void`	-	Both clocks for the chosen slot.

Accessibility

Each time is labelled with its date shift when it falls on another day ("9:00 PM, previous day"); the zone select is labelled and the status states both clocks.

Testing

The pattern ships with a Testing Library test (time-zone-aware-slots.test.tsx) that covers conversion across zones and DST, day shifts and the callback.

Guide and examples

When to use it

Use it when a host in one time zone offers slots to people in others and nobody should do the maths.

Do not use it when everyone is in one zone; use time-slot-picker.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
date	string	-	Host-local day, ISO.
hostZone	string	Europe/Berlin	IANA zone of the host.
zones	string[]	6 common zones	Zones the visitor can pick.
slots	string[]	09:00-16:30	Host-local start times.
onValueChange	`(choice: { hostTime; viewerTime; zone } \| null) => void`	-	Both clocks for the chosen slot.

Accessibility

Each time is labelled with its date shift when it falls on another day ("9:00 PM, previous day"); the zone select is labelled and the status states both clocks.

Testing

The pattern ships with a Testing Library test (time-zone-aware-slots.test.tsx) that covers conversion across zones and DST, day shifts and the callback.