> ## Documentation Index
> Fetch the complete documentation index at: https://afonsojramos-claude-issues-54-55-0b0zaz.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Time zones

> Display events in a specific time zone, DST-correct.

Events lay out from their local wall-clock time. To display them in a specific
IANA zone regardless of the device, pass `Calendar` a `timeZone`. It's DST-correct
via `Intl`.

```tsx theme={null}
import { Calendar } from "@super-calendar/native";

// Render every event at its New York wall-clock time.
<Calendar /* ... */ timeZone="America/New_York" events={events} />;
```

Under the hood this runs your events through `eventsInTimeZone`. Call it (or
`toZonedTime` for a single date) yourself if you need the shifted events outside
`Calendar`:

```tsx theme={null}
import { eventsInTimeZone } from "@super-calendar/native";

const zoned = eventsInTimeZone(events, "America/New_York");
```

<Warning>
  The returned dates are for display only — they carry the zone's wall clock, not the original
  instant. Keep your source events around for editing and saving.
</Warning>

## Anchor dates are local

The controlled `date` prop, like every `Date` the calendar reads, is
interpreted in the device's local time zone: all date math runs through
date-fns (`startOfWeek`, `startOfMonth`, ...) on the local clock. Construct
anchors as local dates, not UTC instants:

```ts theme={null}
new Date(2026, 7, 24); // local Aug 24, anchors the week you expect everywhere
new Date("2026-08-24T00:00:00Z"); // UTC instant, still Aug 23 west of UTC
```

On a device west of UTC, that UTC-midnight instant is still the evening of
Aug 23 locally, so a `week` view with `weekStartsOn: 1` builds the week of
Monday Aug 17, a full week before the one intended (Aug 24 is itself a
Monday). The same shift moves a `month` anchor built from
`new Date("2026-08-01T00:00:00Z")` into July.

`timeZone` doesn't change this: it shifts how events display, never how the
`date` prop is read. The dates the calendar hands back (`onChangeDate`,
`onChangeDateRange`, `onPressDay`, ...) are local dates too, so feeding them
straight back into `date` is always safe.

## The now indicator

The current-time line follows the same zone as your events: set `timeZone` on
`Calendar` and the line lands where "now" is in that zone, not where the device
clock is. Pass `now` for a fixed instant instead (a server-synced clock, or a
stable value in tests); a fixed `now` doesn't tick. `ResourceTimeline` takes the
same `showNowIndicator` / `now` / `timeZone` props and draws its line across the
lanes whenever the board's `date` is that zone's today.