Working with time zones is always a mess, whatever language, technology stack or environment you're in. There are always different issues on how to convert dates, get correct time zone and so on.
Currently I'm working on SPFx solution that should create an event in Outlook calendar.
User should be able to select date, time, and time zone of the event.
Time zone selection dropdown should display friendly names like that:
And the dropdown initial selection should be based on browser's (computer) time zone.
Below I'm providing some thoughts on the implementation, unfortunately without final solution for now. All the thoughts are based on the SPFx stack.
Implementation StepsSo, what should be done?
- Create date time picker to select the date and time of the event.
This step is simple, and we can use PnP Reusable Controls for that
- Create time zones dropdown and display friendly time zones names.
Not an issue as well. We can use /me/outlook/supportedTimezones MS Graph endpoint to get all user's time zones:
- Set time zones dropdown's selected item to current time zone.
This is a step with problems, and I will describe them below.
- Create new event using data entered by a user.
Complicated step as well. But if we have current browser's time zone (and/or it's offset - which is always available), and new selected time zone with its offset - we can convert the date and time to needed time zone to send to the server using Create Event method of MS Graph:
Problem #1 - IE 11Browsers contain Intl APIs that allow you to get current time zone:
It allows you to correctly define user's time zone and even location (more or less). The problem with it is you need to map it with user-friendly display name that is added to time zones dropdown. See Problem #2 - IANA-Windows Time Zones Mapping.
Everything is good, but in IE 11 Intl.DateTimeFormat().resolvedOptions().timeZone is undefined...
OK, in that case we can get time zone offset from a Date object:
Another option here is to get time zone setting from user's Outlook Calendar. It might differ from current time zone while traveling, but in most cases will be accurate.
We can do that using user's mailboxSettings resource from MS Graph:
Problem #2 - IANA-Windows Time Zones MappingThis problem is related to the fact that in time zones dropdown we want to show user-friendly time zones (called Windows time zones), and browser's time zone is stored as IANA time zone code. And we need to map these two to select correct item in the dropdown based on browser's time zone.
Unfortunately, there is no one-to-one mapping between Windows and IANA time zones: one Windows time zone contains multiple IANA time zones.
Another problem here is that time zones and daylight saving rules are changed relevantly often, so, if you don't want to support your code forever, you don't want to hardcode the mapping.
First source I was looking into to solve the mapping issue was MS Graph. Mentioned earlier /me/outlook/supportedTimezones endpoint allows us to get time zones in Windows format, as well as in IANA format, if we add TimeZoneStandard=microsoft.graph.timeZoneStandard'Iana' parameter:
For example, for Pacific Standard Time in Windows list I'll get
As you can see there is no way to map these values one to another.
NOTE: I've posted a MS Graph UserVoice idea to provide some kind of mapping in the results. So, if you feel like this will solve your pain, please, go and vote for it.
So, after failure with MS Graph I was looking for some existing free APIs/endpoints to get this mapping. And, unfortunately, I was unable to find any... Remark here is that I was looking for commercial usage, there are some free resources for personal usage, but not for commercial.
The only more or less interesting resource I found is windowsZones.xml hosted by Unicode.org. They update it more or less regularly, so it can be used to get the mapping.
The problem here is that while implementing logic to get that file (with caching of course) from the url above, parse it and return in needed format, I experienced 503s multiple times...
So, I decided, that I can't rely on that.
As of now, the only solution here from my point of view is
- Get either this XML, or full IANA database, and copy it to your custom location
- Implement REST API (or any other API) to get mapping in needed format
- Worst part: do not forget to update the file/database if a new version was released
ConclusionTime zones conversion itself is difficult in implementation. But this part is mostly solved with such libraries as moment-timezones.
Unfortunately, there are other problems that we can face while working on projects with dates.
Two of them are listed above: IE 11 doesn't show current time zone info, and there is no reliable easy-to-support solution for Windows-IANA time zones mapping.
Please, vote for MS Graph UserVoice idea to solve at least the second problem with out-of-the-box Office 365 implementation.
That's all for today!