World Clock Meeting Planner

ProNew

A meeting time entered in one zone and shown in several others with the day difference and a flag for times outside working hours. Use this when people in different time zones need to find a time that is reasonable for all of them.

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.

value / defaultValue

baseZone

Guide and examples

When to use it

Use it when people in different time zones need to find a time that is reasonable for all of them.

Do not use it to publish booking slots; use time-zone-aware-slots.

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
zones	`{ zone: string; label: string }[]`	4 zones	Where people are.
value / defaultValue	string \| null	null	Local date-time in `baseZone`.
baseZone	string	first zone	Zone the time is entered in.
workHours	`{ start: string; end: string }`	08:00-18:00	Reasonable hours.
onValueChange	`(instant: string \| null) => void`	-	UTC instant as an ISO string.

Accessibility

Each row states its local time and, in words, whether it is outside working hours or on another day; nothing relies on colour alone.

Testing

The pattern ships with a Testing Library test (world-clock-meeting-planner.test.tsx) that covers the conversion, day shifts, the working-hours flag and the UTC instant.