如何在 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 最低要求。有些日历应用程序比其他应用程序更挑剔，因此文件最好尽可能有效。参见

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

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

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

javascript

icalendar

calendar

dynamic

reactjs