Scheduler - Timezones

#Usage

import { Scheduler } from '@primeui/vue-scheduler';

<Scheduler.Root :timezone="timezone" :display-timezone="displayTimezone">
    <!-- Scheduler parts -->
</Scheduler.Root>

Timezone behavior is a root display contract. Store event dates in the scheduler timezone, then choose the display timezone users should see in grids and overlays.

#Timezone Display

timezone is the Scheduler data zone. displayTimezone controls the visible zone and accepts local, UTC, or an IANA timezone string.

import type { SchedulerProps, TimezoneDisplay } from '@primeui/vue-scheduler';

const timezone: SchedulerProps['timezone'] = 'UTC';
const displayTimezone: TimezoneDisplay = 'Europe/Istanbul';

Use timezone for stored event math and displayTimezone for the labels and event positions users see.

#Timeline Zones

Timezone-aware timeline labels can show source-zone badges on each handoff. Zoned range calculation, event placement, and navigation use the configured display zone.

#Edge Cases

Daylight-saving boundaries can make visible days shorter or longer than 24 hours. Avoid deriving persistence from formatted labels. Save the emitted Date values or a separately normalized instant instead. When users collaborate across regions, show the display timezone near the toolbar. A shifted event should not look like a data-loss bug.

Timezone display is a presentation concern. If a workflow needs to move the actual event timezone, update the event record explicitly. Keep that change separate from the Scheduler displayTimezone prop.

#API

Key inputs are timezone, displayTimezone, timeFormat, event date fields, and emitted date payloads.

#Related Docs

• Time Format
• Timeline View