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

How to generate ICS file for different calender's dynamically in reactJS

我有事件数据,我希望用户能够下载 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));
  }

}

根据 RFC5545 检查您是否满足有效 ics 文件的最低要求。我发现您至少缺少一些 VCALENDAR 最低要求。有些日历应用程序比其他应用程序更挑剔,因此文件最好尽可能有效。参见

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