创建javascript ICS以添加到ios上的日历

Posted 2023-03-24

【中文标题】创建javascript ICS以添加到ios上的日历

【英文标题】：Create javascript ICS to add to calendar on ios

【发布时间】：2021-12-16 13:04:16

【问题描述】：

我正在尝试从这个问题create .ics file on the fly using javascript or jquery? 中获取此代码，以便在 iPhone 上正常工作并将其添加到日历中。

我有这样的开始和结束时间的字段

<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>

而我的 javascript/jQuery 就是这样

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:[e-mail]\nDTSTAMP:20120315T170000Z\nATTENDEE;CN=My Self ;RSVP=TRUE:MAILTO:[e-mail]\nORGANIZER;CN=Me:MAILTO::[e-mail]\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));
    );

我还创建了一个小提琴，但是在 iPhone 上进行测试时，它会打开一个新窗口并说它正在尝试添加一个日历事件，但是当我点击确定时它说无效。

https://jsfiddle.net/abennington/ce5xz6y9/10/

任何帮助将不胜感激。 :) 谢谢！

【问题讨论】：

使用非移动浏览器进行测试时会得到什么样的结果？你在 iPhone 上得到了什么？

当它打开新标签页时显示“该网站正在尝试向您显示日历邀请。您要允许这样做吗？”然后当你说允许它说“Safari 不能下载这个文件”。

【参考方案1】：

考虑以下内容。

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:[e-mail]\r\n"
    icsMSG += "DTSTAMP:20120315T170000Z\r\n";
    icsMSG += "ATTENDEE;CN=My Self;RSVP=TRUE:MAILTO:[e-mail]\r\n";
    icsMSG += "ORGANIZER;CN=Me:MAILTO::[e-mail]\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();
  );
);

这是基于以下内容：How to rename downloaded files from window.open() in javascript?

还检查了此处的格式：https://docs.fileformat.com/email/ics/ 建议 CRLF (\r\n)。

更多关于下载属性：https://caniuse.com/?search=download

【讨论】：

这很棒，在 Chrome 中运行良好，但在 iPhone 上测试小提琴它说 safari 无法下载此文件。