jasonleibowitz/react-add-to-calendar-hoc

Daylight Saving Time not considered in Outlook

marcmetz opened this issue · 5 comments

Bug report

Describe the bug

We are facing the issue that Outlook (Microsoft Office 2019) is not considering the daylight saving time for Berlin/Europe.

To Reproduce

Summertime

Create an event on October 23, 2020, at 12 pm Europe / Berlin time.
Download for Outlook.
Open in Outlook. It will be inserted on October 23, 2020, at 1 pm

Wintertime

Create an event on October 28, 2020, at 12 pm Europe / Berlin time.
Download for Outlook.
Open in Outlook. It will be inserted on October 28, 2020, at 12 pm
Note: Here the daylight saving time changed from summer to winter-time.

System information

  • OS: Windows
  • Outlook (Microsoft Office 2019)

Additional context

Here how the .ics file looks like.

BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
URL:https://google.com
METHOD:PUBLISH
DTSTART;TZID=Europe/Berlin:20201023T120000
DTEND;TZID=Europe/Berlin:20201023T130000
SUMMARY:Demo Event
DESCRIPTION:
LOCATION:
END:VEVENT
END:VCALENDAR

@marcmetz did you ever find a solution to this. Had a customer report it today. It looks like to better handle DST the ics needs to have the VTIMEZONE data included but I don't think that's feasible in this library without adding in some sort of additional dependency that has that information.

@marcmetz @JoshReedSchramm I just ran into this same issue this past week. Was working with some clients in Amsterdam currently observing CEST. Anytime they would add it to their calendar, it was 1 hour ahead. 12:30pm start time would show up at 1:30pm.

@ryanjanelli @JoshReedSchramm @marcmetz did any of you you work out how to get around this issue? VTIMEZONE is required but the format in which this is needed but the docs are impenetrable.

@howells @JoshReedSchramm My solution was to omit the timezone from the .ics completely. I was displaying the time correctly on my application to the attendee. I passed that time to react-add-to-calendar-hoc. I followed the first documentation example from here http://leibowitz.me/react-add-to-calendar-hoc/docs/ . This worked for my situation. I can see this not being a solution if someone wanted to share that .ics file with a colleague in a different time zone. That would cause it to display incorrectly.

evnp commented

We've been running into this issue, and have resolved it by adding VTIMEZONE components to .ics files produced by this library. We've been using https://github.com/add2cal/timezones-ical-library to build the VTIMEZONE text, which seems to work pretty well.

I forked react-add-to-calendar-hoc in order to add the ability to insert the VTIMEZONE component into the .ics file during buildShareFile. We also opened a pull request here with that functionality: #62

This is the glue code we're using to integrate these two libraries:

import { tzlib_get_ical_block, tzlib_get_timezones } from 'timezones-ical-library';

const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const vtimezoneOptions = tzlib_get_timezones();
let [vtimezone = null] = vtimezoneOptions.includes(timezone) ? tzlib_get_ical_block(timezone) : [];
// tzlib uses \r\n as newline characters which we don't want, replace them with \n here:
vtimezone = vtimezone?.replace(/\r\n/g, '\n');

const AddToCalendarDropdown = AddToCalendarHOC(Button, Dropdown);
return (
  <AddToCalendarDropdown event={{ timezone, vtimezone, /* ...etc... */ }} />
);