No Way to Change Timezone

[imamaad]

Description: In the react-calendar-timeline package, versions 0.30.0-beta.1 and 0.30.0-beta.2, there is no available method to change the timezone. Most of the time, the package works with timestamps, and even using dayjs, it is impossible to change the timezone.

Steps to Reproduce:

Install version 0.30.0-beta.1 or 0.30.0-beta.2 of react-calendar-timeline.
Attempt to change the timezone using dayjs or other methods.
Notice that the timezone cannot be modified, even though it’s working with timestamps.
Expected Behavior: There should be a way to adjust or set the timezone for the calendar to handle time properly based on the user's local timezone or a different specific timezone.

Actual Behavior: There is no available option to change the timezone, making it difficult to work with time-sensitive data across different time zones.

Screenshots: (If applicable, add screenshots here to help explain the issue.)

Library Version: react-calendar-timeline version 0.30.0-beta.1 and 0.30.0-beta.2.

React Version: 18.2

[joaspiosantos]

Use .valueOf() to get the unix timestamp and use your date lib with your locale or timezone.

[xlrops]

I have spent hours trying to get it to work using a different timezone other than my local browser timezone and I just can't find a way. Neither can AI. Is there an example of how this can work. In my app I allow user's to set their timezone and that gets stored in the DB. It works fine as long as they set their timezone to match the actual timezone they are in, but if I set it to anything other than that it just won't work for me. I live in CST but if I set my timezone in my app EST the timeline headers for hours shows that the day starts at 1AM. And if I set the timezone to anything west of CST it shows the previous day as the current day. I love this component but I really need this to work somehow. Here's the utility file I created for formatting the timezones:

`
import dayjs from "dayjs"
import utc from "dayjs/plugin/utc"
import timezone from "dayjs/plugin/timezone"

dayjs.extend(utc)
dayjs.extend(timezone)

/**

• Returns the UTC range (start and end timestamps) for the selected tenant-local day.
  */
  export function getUtcDayRangeForTenant(date: Date, tenantTz: string) {
  const startLocal = dayjs.tz(date, tenantTz).startOf("day")
  const startUtc = startLocal.utc() // convert to UTC
  const endUtc = startUtc.add(1, "day")

  return {
  start: startUtc.valueOf(), // UTC timestamps
  end: endUtc.valueOf(),
  }
  }

/**

• Returns the tenant-local range (start and end timestamps) for the selected day.
  */
  export function getLocalDayRangeForTenant(date: Date, tenantTz: string) {
  const start = dayjs(date).tz(tenantTz).startOf("day")
  return {
  start: start.valueOf(), // Local ms timestamp
  end: start.add(1, "day").valueOf(),
  }
  }

/**

• Converts a tenant-local ISO string into a UTC timestamp (ms).
  */
  export function toUtcTimestampFromTenantTime(iso: string, timezone: string) {
  const parsed = dayjs.tz(iso, timezone)
  return parsed.isValid() ? parsed.valueOf() : NaN
  }

/**

• Converts a tenant-local ISO string into a local timestamp (ms).
  */
  export function toLocalTimestampFromTenantTime(iso: string, tenantTz: string) {
  return dayjs.tz(iso, tenantTz).valueOf()
  }

/**

• Converts a UTC timestamp to tenant-local time and formats it.
  */
  export function formatTimestampInTenantTz(
  utcMillis: number,
  tenantTz: string,
  format = "MMM D, YYYY h:mm A"
  ) {
  return dayjs.utc(utcMillis).tz(tenantTz).format(format)
  }
  `

[lnagel]

Triage Review (0.30.0-beta.9)

Status: Valid feature request — still relevant ✅

The library internally uses dayjs with the UTC plugin, but has no mechanism to specify a custom timezone. Key observations:

1. Header rendering uses dayjs(timestamp).startOf(unit) which operates in the local browser timezone
2. Offset calculations use dayjs().utcOffset() * 60 * 1000 (Timeline.tsx line ~991, Item.tsx line ~208) — hardcoded to the browser's local offset
3. There's a static setDayjsLocale method exposed on the Timeline class for locale, but no equivalent for timezone

The workaround of passing UTC timestamps and using .valueOf() works for item positioning, but the header labels (hours, days, etc.) will always render in the browser's local timezone. This is the core problem — users can't control what timezone the headers display.

To properly support timezones, the library would need:

• A timezone prop on the Timeline component
• Using dayjs.tz() (from dayjs/plugin/timezone) instead of dayjs() in iterateTimes() and header label formatting
• Adjusting the hardcoded utcOffset() calls to use the configured timezone

This is a legitimate feature gap for the stable release, especially for applications serving users across timezones. It's a feature request rather than a bug, but an important one.