Angular-calendar: Is there any way to set the calendar timezone independent from the locale ?

[daneshmandi]

Is your feature request related to a problem? Please describe

I need to change the timezone of the calendar at run-time and it needs to be independent from the locale. Is there any way to do this ?

Describe the solution you'd like

If we can bind it the way we can bind locale like [timezone]="MyTimeZone" would be good.

Describe your use case for implementing this feature

I am implementing an scheduler app that requires to change the timezone on the fly and see the scheduled event in that specific timezone.

Additional context

[mattlewis92]

I do the same thing in my app as well, you can use moment instead of date-fns and then set the timezone via moment-timezone. Hope that helps! 😄

[daneshmandi]

@mattlewis92 Thanks. It works as you have mentioned.

Your new release was done in a perfect time. I required all these new features that you have included in the latest release. Thanks again! 😄

[andrewryan1906]

Everyone,

I'd like to use this solution, but if I change the timezone via the global property, it changes it across my application. In my use case, I have one specific component that needs to work in a different timezone. I'm building an event scheduler and it needs to work in the timezone of the event; so if I'm building a schedule for an event in Australia, 10:00 am neesds to be 10:00 am in Australia.

Any suggestions?

[pjuzeliunas]

If you use UTC time, then it can be converted to timezoned time using utcToZonedTime function from date-fns-tz package.

import { utcToZonedTime } from 'date-fns-tz';

let utcDate = new Date(yourOriginalTimestamp)
let adjustedDate = utcToZonedTime(utcDate, "Europe/Vilnius")

Then you just pass the adjustedDate to your CalendarEvent.

Read more in this doc.

[siva-geddada]

Just use Moment for to set the calendar timezone independent from the locale
I have an issue with the date format using moment in Chrome

Initally i am coding like this way
const agentdate = moment
.utc(val.begins_at)
.subtract(pre_duration, 'm')
.tz('America/Los_Angeles')
.format('hh:mm a- MMM DD, yyyy');

Chrome is not supporting the above date format , Firefox will work

This Format will work Both Chrome and FireFox as well
const agentdate = moment
.utc(val.begins_at)
.subtract(pre_duration, 'm')
.tz('America/Los_Angeles')
.format('MMM dd, yyyy - hh:mm a');