Convert time in react big calendar from 0000000 to 0z - reactjs

Question

Hi I am currently facing the problem in react where I use react-big-calendar. The time is off by one hour, likely caused because daylight savings and timezone differences.
My code looks like the following:
The part where I struggle is to convert the date in my data object to isoISO 8601. I am unable to parse start and end properties from microsoftgraph Event and any guidance would be appreciated very much!
Note that currently what date I get returned from my event start and end is "2022-11-16T07:30:00.0000000" but I want to convert it to "2022-11-16T07:30:00.0z", if that makes sense.
const data = calendarEvent.map((event: microsoftgraph.Event) => {
return {
id: event.id,
title: event.location.displayName,
allDay: false,
start: new Date(event.start.dateTime),
end: new Date(event.end.dateTime),
}
});
EDIT: Solution was to add a string "z" after event.start.dateTime
It's not the most elegant solution but it works, for now.
Code with the solution implemented:
const data = calendarEvent.map((event: microsoftgraph.Event) => {
return {
id: event.id,
title: event.location.displayName,
allDay: false,
start: new Date(event.start.dateTime + "z"),
end: new Date(event.end.dateTime + "z"),
}
});

Answer 1

The date string is already in ISO-8601 form but has no offset indicator. new Date(string) will parse it assuming it's local to the browser's timezone. On my machine, omitting the offset results in a +02:00 offset:
> new Date('2022-11-16T07:30:00.0000000')
<- Wed Nov 16 2022 07:30:00 GMT+0200 (Eastern European Standard Time)
> new Date('2022-11-16T07:30:00.0000000Z')
<- Wed Nov 16 2022 09:30:00 GMT+0200 (Eastern European Standard Time)
> new Date('2022-11-16T07:30:00.0000000+04:00')
<- Wed Nov 16 2022 05:30:00 GMT+0200 (Eastern European Standard Time)
A dirty hack would be to just append Z to the date string. This will work as long as dateTime has no offset or timezone indicator:
start: new Date(event.start.dateTime + 'Z')
Another option is to use the date library used with react-big-calendar to parse ambiguous date strings as UTC :
start: moment.utc(event.start.dateTime)
event and Timezones
Unfortunately, the dateTimeZone.dateTime field is UTC by default but can refer to a different time zone. This is specified in the dateTimeZone.timeZone field. If there's a chance that MS Graph returns local times, the field property should be checked.
If MS Graph returns an IANA timezone the moment-timezone package can be used to parse both the time and timezone name :
start: moment.utc(event.start.dateTime,event.start.timeZone)
The following call returns 08:30 on my browser's console:
> moment.tz('2022-11-16T07:30:00.0000000','Europe/Vienna').toDate()
<- Wed Nov 16 2022 08:30:00 GMT+0200 (Eastern European Standard Time)