jasonleibowitz / react-add-to-calendar-hoc

Simple Unopinionated React Add to Calendar Button. Bring your own components.
http://leibowitz.me/react-add-to-calendar-hoc/docs/
MIT License
70 stars 40 forks source link

Allow adding optional VTIMEZONE component to ICS files #62

Open evnp opened 1 year ago

evnp commented 1 year ago

Hello, first off thank you for the library, it's been very useful to us.

We've been running into the issue described at https://github.com/jasonleibowitz/react-add-to-calendar-hoc/issues/46 which results in .ics files generated by this library being imported into Outlook with start and end times 1 hour offset from what they should be. Updating these .ics files to include a VTIMEZONE component following the spec fixes the issue for us.

I see that an abandoned PR to build VTIMEZONE functionality into react-add-to-calendar-hoc has been closed here: https://github.com/jasonleibowitz/react-add-to-calendar-hoc/pull/45

This kind of functionality would be ideal for us, but in lieu of that we can resolve our issue if we simply have an option to insert pre-constructed VTIMEZONE text into the right place during react-add-to-calendar-hoc's buildShareFile. This pull request implements the logic needed to insert the VTIMEZONE component in the right place in the .ics file.

We're using https://github.com/add2cal/timezones-ical-library along with this glue code to integrate the 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... */ }} />
);