如何在reactJS中动态生成不同日历的ICS文件

Question

我有事件数据，我希望用户能够下载 ICS 文件并将其保存在他们选择的日历中

这是我正在使用的功能，但生成的 ICS 文件仅在 Outlook 日历中支持。如何为所有类型的日历生成动态 ICS 文件？

export const saveCallInvite = (event) => {
  const newEvent = { ...event, address: event?.event_url ? event?.event_url : `${event?.address?.line_1} ${event?.address?.line_2}, ${event?.address?.city} ${event?.address?.state}, ${event?.address?.country} ${event?.address?.postal_code} ` }
  // Create the .ics URL
  let url = [
    "BEGIN:VCALENDAR",
    "VERSION:2.0",
    "BEGIN:VEVENT",
    "DTSTART:" + newEvent.date,
    "DTEND:",
    "SUMMARY:" + newEvent.name,
    "DESCRIPTION:" + newEvent.description,
    "LOCATION:" + newEvent.address,
    "BEGIN:VALARM",
    "TRIGGER:-PT15M",
    "REPEAT:1",
    "DURATION:PT15M",
    "ACTION:DISPLAY",
    "DESCRIPTION:Reminder",
    "END:VALARM",
    "END:VEVENT",
    "END:VCALENDAR"
  ].join("\n");

  let blob = new Blob([url], { type: 'text/calendar;charset=utf-8' });

  if (/msie\s|trident\/|edge\//i.test(window.navigator.userAgent)) {
    // Open/Save link in IE and Edge
    window.navigator.msSaveBlob(blob, `.ics`);
  } else {
    // Open/Save link in Modern Browsers
    window.open(encodeURI("data:text/calendar;charset=utf8," + url));
  }

}

Answer 1

检查您是否符合 RFC5545 规定的有效 ics 文件的最低要求。我发现您至少缺少一些 VCALENDAR 最低要求。某些日历应用程序比其他应用程序更挑剔，因此文件最好尽可能有效。请参阅https://stackoverflow.com/a/67698638/440290

然后使用所有 ics 验证器检查输出 ics 文件。他们不会检查所有内容，因此可能会给您不同的错误和警告。