Skip to content

Feature request: Render calendar in a selected time zone (events stored as UTC) #204

@sahilalad

Description

@sahilalad

Title: Feature request: Render calendar in a selected time zone (events stored as UTC)

Summary
I store all event timestamps in UTC. The scheduler currently renders using the viewer’s device time zone. I need an option to render the entire calendar (grid, headers, event chips, tooltips) in a user-selected IANA time zone.

Current behavior

  • Events are saved as UTC.
  • UI renders times in the device/browser time zone.
  • Users in different regions see different local times for the same event.

Expected behavior

  • Provide a prop to control display time zone.
  • When set, all calendar UI uses that zone.
  • Creating or editing events still returns UTC to the app.

Proposed API (example)

<Scheduler
  events={events}            // ISO strings in UTC
  displayTimeZone="Asia/Dubai" // IANA TZ for rendering only
  onEventCreate={(e) => saveAsUTC(e)} // library hands back Date; app persists UTC
/>

Details:

  • displayTimeZone?: string accepts an IANA name (e.g., "America/Toronto").
  • Internal conversions use Intl.DateTimeFormat or a lightweight TZ lib.
  • If not provided, fall back to device time zone (current behavior).

Why this matters

  • Admins schedule global sessions but want a consistent view per chosen region.
  • Avoids confusion across DST changes and cross-region teams.
  • Pre-converting data outside the component is brittle and does not change headers/slots.

Alternatives considered

  • Manually converting event start/end before passing to the component.

    • Problem: headers, slot labels, and drag/resize handles still use device TZ.

Environment

  • react-scheduler: [0.3.1]
  • React: [18.3.1]
  • Browser/OS: [e.g., Chrome 139 on Windows 10]
  • Device TZ: [e.g., America/Toronto]
  • Desired display TZ: [e.g., Asia/Dubai]

Additional context
Happy to provide a minimal reproduction if needed. If a PR is welcome, confirm preferred approach for time zone handling and any constraints.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions