[Bug]: Add to apple calendar is not working react PWA app on iPhone

[shinde-prasad]

[Bug]: Add to apple calendar is not working react PWA app on iPhone

[jekuer]

Can you share the settings you are using for the button?

[shinde-prasad]

Hi @jekuer
please find below snapshot we added in react template,
placeholder variables values please ignore for now. as its working for android but for IOS apple calendar doest open.

`<add-to-calendar-button
class="calendarButton"
name={selectedEvent.title}
description={selectedEvent.description}
startDate={
selectedEvent.start}
endDate={
selectedEvent.end}
startTime={
selectedEvent.start}
endTime={
selectedEvent.end}
location={selectedEvent.classroom}
options="'Apple','Google','iCal','Microsoft365'"
timeZone="GMT" //Europe/London
trigger="click"
buttonStyle="round"
size="4"
inline
listStyle="modal"
iCalFileName="TimeTable-Event"
lightMode={
localStorage.getItem("theme") === "dark" ? "dark" : ""
}
styleLight="--btn-background: transparent;--btn-background-hover: transparent; --btn-text: #000;--btn-shadow: transparent;--btn-shadow-hover: transparent;--btn-border: none !important; --font: Roboto;--base-font-size-l: 12px;--base-font-size-m: 12px;--base-font-size-s: 12px;font-weight: normal"
styleDark="--btn-background: transparent;--btn-background-hover: transparent; --btn-text: #fff;--btn-shadow: transparent;--btn-shadow-hover: transparent;--btn-border: none !important; --font: Roboto;--base-font-size-l: 12px;--base-font-size-m: 12px;--base-font-size-s: 12px;font-weight: normal"

`

[jekuer]

Does it work when not installed (aka directly in Safari)?

[shinde-prasad]

Yes it works on safari. and please note library version was v2.3.0 and not latest version which is deployed last week.
may i know is there any fix in new version regarding ios

[jekuer]

Alright. Thanks.
In this case, there might be a problem with the web view detection. I will check on this. Usually, you would see a screen telling you to open a then provided url into Safari.
Unfortunately, there is no way around this as Apple blocks the dynamic generation of ics files, which are necessary for the Calendar.

What you can do:

• provide a static ics file via the icsFile option.
• if you require dynamic generation, you would need to generate this on the Server-Side. We provide a manager solution for this with our PRO service. There, the process would be slightly different as you would create an event via the api and then simply use the prokey attribute for the button element. If you want to go this way, I am happy to assist.

[shinde-prasad]

please note library version was v2.3.0 and not latest version which is deployed last week.
may i know is there any fix in new version regarding ios.

[jekuer]

There was one fix, indeed. Not directly related, but could be worth a try.

[shinde-prasad]

hi @jekuer , i tried with updated version but it didnot work.
is there any way for apple calendar to fetch ical file open it using webcal://
in onclick event?

[jekuer]

stupid question: why are you using test flight?
Are you using a wrapper around the PWA?
This would change a lot.

But most probably, that is the reason it does not get catched, while the restrictions of your wrapper do not allow the ics url to be generated.

Things to consider:

• we generate a data URL to dynamically generate the ics. The way around this would be a static ics file (there we automatically set https or webcal based on the case). Building an ics file dynamically would require a server side process. This is where the PRO version gets into play.
• When using a wrapper, you are basically - building a native app (from our perspective). There, you need to make sure you allow data urls and triggering downloads. This is not under our control.
• it could be that the info modal is not showing up, because it would work, but in the end gets blocked by test flight (I mean, we are in a very nested setup). This would mean that it will work in the actual app, but not with test flight. However, we cannot be sure about that.
• After all, at the moment, I do not see anything we could fix/change on our side.

Our demo page is a PWA as well. You can add it to your home screen to check it out. There, it is also working fine.

But maybe you have more information on your setup, tooling, and processes. This could help to maybe get to more ideas.

[jekuer]

Closing this due to inactivity

[shinde-prasad]

@jekuer ideally it should get solved if we give activity to IOS device to launch the URL we are trying to open.