jasonleibowitz/react-add-to-calendar-hoc

Mobile Safari Add to Outlook adds to Apple Calendar

lsurasani opened this issue · 4 comments

Using iPhone 6s iOS 11.4.1 -- when on examples site on safari, adding to Outlook adds iCal

Want to try to fix and open a PR? Otherwise I'll check it out as soon as a I can.

yeah! I can try to look at it in the next few days.

@jasonleibowitz so I'm not sure that this is possible actually - the only way I'm seeing to import an event into Outlook Calendar is through an ics file, but iPhones automatically open ics files in Apple Calendar

So I think this is an issue with iPhone default apps. When the iPhone sees an ics file it will always open its default app.

This library is meant to be as unopinionated as possible so my suggestion for you is to add a check wherever you render the HOC and conditionally change which items you display. Here's an example:

// User browser's userAgent string to check if device is iOS
const isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent);

<AddToCalendarModal
  className={componentStyles}
  linkProps={{
    className: linkStyles,
  }}
  event={event}
  items={ isiOS ? [SHARE_SITES.GOOGLE, SHARE_SITES.ICAL, SHARE_SITES.YAHOO] : undefined }
/>

So if the user's device is iOS we display all options except outlook. Otherwise we display all options. Passing undefined into items means we use the default, which is to display all.

Note: There are plenty of ways to check if the user's device is an iPhone, above is just an example. You can also check out bowser.