I am trying to get this code from this question create .ics file on the fly using javascript or jquery? to work with no luck on an iphone and have it add to the calendar.
I have fields with the start and end times like so
<div class="start-time">9:30am</div>
<div class="end-time">10:30am</div>
<div class="Location">California</div>
<p><a href="#" class="test">Add to Calendar</a></p>
And my javascript/jQuery is like so
msgData1 = $('.start-time').text();
msgData2 = $('.end-time').text();
msgData3 = $('.Location').text();
var icsMSG = "BEGIN:VCALENDAR\nVERSION:2.0\nPRODID:-//Our Company//NONSGML v1.0//EN\nBEGIN:VEVENT\nUID:me@google.com\nDTSTAMP:20120315T170000Z\nATTENDEE;CN=My Self ;RSVP=TRUE:MAILTO:me@gmail.com\nORGANIZER;CN=Me:MAILTO::me@gmail.com\nDTSTART:" + msgData1 +"\nDTEND:" + msgData2 +"\nLOCATION:" + msgData3 + "\nSUMMARY:Our Meeting Office\nEND:VEVENT\nEND:VCALENDAR";
$('.test').click(function(){
window.open( "data:text/calendar;charset=utf8," + escape(icsMSG));
});
I have also created a fiddle but when testing on an iPhone it opens a new window and says it is trying to add a calendar event but when I click ok it says not valid.
https://jsfiddle.net/abennington/ce5xz6y9/10/
Any help would be greatly appreciated. :) Thanks!
Consider the following.
https://jsfiddle.net/Twisty/wmznc6vq/20/
JavaScript
$(function() {
$('.test').click(function(event) {
event.preventDefault();
// Format: https://docs.fileformat.com/email/ics/
var icsMSG = "BEGIN:VCALENDAR\nVERSION:2.0\r\n";
icsMSG += "PRODID:-//Our Company//NONSGML v1.0//EN\r\n";
icsMSG += "BEGIN:VEVENT\r\n";
icsMSG += "UID:me@google.com\r\n"
icsMSG += "DTSTAMP:20120315T170000Z\r\n";
icsMSG += "ATTENDEE;CN=My Self;RSVP=TRUE:MAILTO:me@gmail.com\r\n";
icsMSG += "ORGANIZER;CN=Me:MAILTO::me@gmail.com\r\n";
icsMSG += "DTSTART:" + $('.start-time').text() + "\r\n";
icsMSG += "DTEND:" + $('.end-time').text() + "\r\n";
icsMSG += "LOCATION:" + $('.Location').text() + "\r\n";
icsMSG += "SUMMARY:Our Meeting Office\r\n";
icsMSG += "END:VEVENT\r\nEND:VCALENDAR";
var title = "newEvent.ics";
var uri = "data:text/calendar;charset=utf8," + escape(icsMSG);
var link = $("<a>", {
href: uri,
download: title,
target: "_BLANK"
}).html("").appendTo("body");
link.get(0).click();
link.remove();
});
});
This is based on the following: How to rename downloaded files from window.open() in javascript?
Also checked formatting from here: https://docs.fileformat.com/email/ics/ which suggests CRLF (\r\n).
More about Download attribute: https://caniuse.com/?search=download