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)
  }
  `