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.

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:

import { eventsInTimeZone } from "@super-calendar/native";

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

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.

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:

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.