Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add to Outlook not working in IE #1

Closed
commonpike opened this issue May 22, 2019 · 20 comments
Closed

Add to Outlook not working in IE #1

commonpike opened this issue May 22, 2019 · 20 comments
Assignees
@commonpike
Labels
bug Something isn't working

Comments

@commonpike
Copy link
Owner

From carlsednaoui#15

.. but I need more info. What is (not) happening ? How can you repeat that ?
@commonpike commonpike mentioned this issue May 22, 2019
Open
@LittleDogFido
Copy link

If you indeed have it working in IE and Edge then that is very encouraging. Using the tester link you sent me, when I attempt to download the ,ics file via the Outlook link(or iCal) in IE I am redirected to a "This webpage cannot be displayed" error page with the "most likely cause" stating that some content requires a program I don't have installed. It shouldn't really need a program as far as I know, and just download the .ics as it does with the other browsers, but for what its worth I do have Outlook. The following appears in the address bar of the error page:

data:text/calendar;charset=utf8,BEGIN:VCALENDAR%0AVERSION:2.0%0ABEGIN:VEVENT%0AURL:https://commonpike.github.io/add-to-calendar-buttons/tester.html%0ADTSTART:20190101T000000Z%0ADTEND:20190101T010000Z%0ASUMMARY:OUI2%20Add%20To%20Calender%20Test%2001%0ADESCRIPTION:%0ALOCATION:%0AUID:-https://commonpike.github.io/add-to-calendar-buttons/tester.html%0AEND:VEVENT%0AEND:VCALENDAR

Additionally, in IE the widgets for the events with a location(Toronto) do not display although the headers for them do. In regards to Edge, an error appears at the bottom of the screen stating that event-invite.ics couldn't be downloaded when Outlook or iCal is selected, although there is no prompt for more details. Prior to updating to the latest version of Edge, nothing happened at all when I clicked the Outlook or iCal link. In all cases the links for the web-based calendars work just fine. I was still unable to download the ics on IE or Edge prior to your overhaul and I had the "nothing happens" issue with Chrome prior to the adding of the download attribute. I am currently using the most recent version of both IE and Edge and have checked the settings of both to make sure there isn't anything abnormal.

@commonpike commonpike self-assigned this May 22, 2019
@commonpike commonpike added the bug Something isn't working label May 22, 2019
@commonpike
Copy link
Owner Author

OK - thanks for the clear report.

As you found out, OUICal generates data-uri links that, when you click them, download the thing described after the 'data:' part of the string. But it seems support is limited in IE and even edge
https://caniuse.com/#feat=datauri

As you see, edge 75 won't have that problem (of course edge 75 will just be chrome).

But I also see the blob workaround you referred to earlier
jasonsalzman/react-add-to-calendar#4

That should be doable. I will look into getting that in - I'm using this myself - but no promise on when.

@LittleDogFido
Copy link

Thanks so much for your help and the information. At the very least now I understand why the problem exists, didn't realize there was limited support.

I look forward to when you are able to get around to getting the workaround in. I'm attempting to add in the calendar functionality as part of an(relatively short) internship I'm doing, so I'll continue working on my own to integrate the work around. Thanks again.

@commonpike
Copy link
Owner Author

Hm .. ok .. let me sketch what I think I would do. I would want the script to write a javascript: url instead of a data: url only if the data: uri is not supported and the blob solution is supported.

The javascript would be a function that creates a blob and calls msSaveOrOpenBlob.

So in the exports, add a function like 'msDownloadCalendar' or so

like, in line 392,

 exports.msDownloadCalendar = function(url) {
    if (thisHasToBeDoneAndCanBeDone) {
     var blob = new Blob([url], { type: 'text/calendar' });
     window.navigator.msSaveOrOpenBlob(blob, 'download.ics');
  }
};

Then, in the calendarGenerators.ics .. line 176 ..

 if (thisHasToBeDoneAndCanBeDone) {
    return '<a class="' + eClass + '" href="javascript:msDownloadCalendar(\'' +
        href + '\')">' + calendarName + '</a>';
} else {
   return '<a class="' + eClass + '" download="'+CONFIG.texts.download+'" href="' +
        href + '">' + calendarName + '</a>';
}

now, if you load the page, on the ics link, it should say javascript:msDownloadCalendar(...) as a link, and if you click it, it should call the function, which should then exist.

now that is the theory. the real time is going to go into figuring out when thisHasToBeDoneAndCanBeDone , and what happens with single quotes, double quotes, onclick, return values ..

let me know how you fare !

@LittleDogFido
Copy link

LittleDogFido commented May 28, 2019 via email

@commonpike
Copy link
Owner Author

My problem here is, I don't have the hardware to test it.
Could you try this file for me:

https://raw.githubusercontent.com/commonpike/add-to-calendar-buttons/feature/msblob/add-to-calendar.js

Here you can see what I did.

master...commonpike:feature/msblob

Its basicly what I described. thisHasToBeDoneAndCanBeDone is a tedious thing. It can be done only if 'msSaveOrOpenBlob' is supported by your browser. It has to be done only if your browser does not support the proper data-uri. If it has to be done but it can't be done, there now is a javascript warning - that should not happen, be never say never.

The real issue that I am running up against, that is preventing from
figuring the proceeding issues out through trial and error is that most
anything I add to the file, completely destroys all functionality as the
console registers either createCalendar and/or addToCalendar as undefined.

Welcome to the world of debugging. It depends on where you make the typo - the console should tell you ! - what happens. If for some reason the javascript can't be parsed (like, missing semicolons or surplus whitespace in the middle of lines, nothing will work.

Can you let me know if my version works ?

(What I expect, is that it actually downloads something, but I'm not 100% sure if its a valid calendar).

@LittleDogFido
Copy link

LittleDogFido commented May 29, 2019 via email

@commonpike
Copy link
Owner Author

commonpike commented May 30, 2019 •
edited
Loading

Bummer

Should the links essentially be the same except for data: being replaced
with Javascript function? or should they be very different as they are?

That is on purpose. If you check what the function ieDownloadCalendar
was receiving (by eg inserting console.log(url);) you should see it is
the same as the chrome url (except for the forward slashes, which is
a browser difference).

If
they should be similar, would changing encodeURIcomponent to
decodeURIcomponent fix that?

No - removing encodeURIcomponent might help on IE, but it breaks the link on other browsers.

I've now changed 'href' to 'onclick' so I can drop the extra encodeURIcomponent. Can you try with the latest version here

https://raw.githubusercontent.com/commonpike/add-to-calendar-buttons/feature/msblob/add-to-calendar.js

and see if that helped ? You can see the changes here

49ea867

@commonpike
Copy link
Owner Author

As for the other errors, I've added issues here https://github.com/commonpike/add-to-calendar-buttons/issues

@commonpike
Copy link
Owner Author

commonpike commented May 30, 2019 •
edited
Loading

And if the new version doesn't help. can you open the console and just type in

ieDownloadCalendar('foo');

(that will give a nice error)
and then try

ieDownloadCalendar('data:text/calendar;charset=utf8,BEGIN:VCALENDAR%0AVERSION:2.0%0ABEGIN:VEVENT%0ADTSTART:20190101T000000Z%0ADTEND:20190101T020000Z%0ASUMMARY:OUI2%20Add%20To%20Calender%20Test%2003%0ADESCRIPTION:%0ALOCATION:%0AUID:9999%0AEND:VEVENT%0AEND:VCALENDAR');

@LittleDogFido
Copy link

LittleDogFido commented May 31, 2019 via email

@commonpike
Copy link
Owner Author

Entering ieDownloadCalendar('foo'); just yields
undefined and attempts to download a .ics file.

Of 3 bytes: the bytes 'f','o' and 'o' :-)

Entering
ieDownloadCalendar('...');
again gives a readout of undefined and prompts for the download of an ics
file but it too does not work.

I was hoping Outlook would give a clear error message ? Perhaps not.
From this point on, we are debugging what Outlook expects to be in the ics file, not how the webpage works.

Can you try

ieDownloadCalendar('BEGIN:VCALENDAR%0AVERSION:2.0%0ABEGIN:VEVENT%0ADTSTART:20190101T000000Z%0ADTEND:20190101T020000Z%0ASUMMARY:OUI2%20Add%20To%20Calender%20Test%2003%0ADESCRIPTION:%0ALOCATION:%0AUID:9999%0AEND:VEVENT%0AEND:VCALENDAR');

instead ?

@LittleDogFido
Copy link

LittleDogFido commented May 31, 2019 via email

@commonpike
Copy link
Owner Author

Aha, and thanks for testing. I was assuming url encoding was needed because that is what they do here jasonsalzman/react-add-to-calendar#4 - however, i see that that message ends in 'help someone' :-)

Could you try if this downloads a valid calendar event:

ieDownloadCalendar('BEGIN:VCALENDAR\nVERSION:2.0\nBEGIN:VEVENT\nDTSTART:20190101T000000Z\nDTEND:20190101T010000Z\nSUMMARY:OUI2 Add To Calender Test 01\nDESCRIPTION:\nLOCATION:\nUID:99999\nEND:VEVENT\nEND:VCALENDAR')

(here, the text is not urlencoded, and newlines are written as \n, which is correct for javascript).
If that works, it's easy to rewrite the code (but not using urldecode, because doh we just urlencoded it ourselves)

@LittleDogFido
Copy link

LittleDogFido commented May 31, 2019 via email

@commonpike
Copy link
Owner Author

OK - can you try this one:

https://github.com/commonpike/add-to-calendar-buttons/raw/feature/msblob/add-to-calendar.js

You can see what I did here:

2fb0742

Would it still
need to be encoded in the Outlook download for Chrome?

No, apparently Outlook expects a 'vanilla' textfile. This is regardless of who downloads that file (outlook doesnt know where it comes from). In the code, it needs to be escaped (instead of encoded), to be able to pass through javascript on one hand and html attributes on the other. I hope that all works now.

@LittleDogFido
Copy link

LittleDogFido commented Jun 3, 2019 via email

@commonpike
Copy link
Owner Author

OK .. are you saying the ics download doesn't work on mobile, both android and ios ? and that that is because of the UID line ? We should create a new issue.

The UID doesn't do anything, but it was part of the spec - I am supposing it makes sure, if you add the event to your calendar a second time, it doesn't add it twice but recognises that it has already been added. Which is useful. Would be nice to know what part of the UID is failing on mobile.

@LittleDogFido
Copy link

LittleDogFido commented Jun 5, 2019 via email

@commonpike
Copy link
Owner Author

Not sure if I understand what happens with the UUID on the ICS. I've merged this code into dev now .. if you want to open another issue for the UUID, please do.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@commonpike commonpike

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@commonpike @LittleDogFido