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

Question

I have event data and I want user to be able to download ICS file and save it in calender of his choice

This is the function I am using but the ics file generated is only supported in outlook calender. How can I generate dynamic ICS file for all calneder type

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

Check that you have the minimum requirements for a valid ics file according to RFC5545. I see you are at least missing some VCALENDAR minimum requirements. Some calendar applications are more fussy than others, so it is best if the file is as valid as possible. See https://stackoverflow.com/a/67698638/440290

Then check your output ics file with all the ics validators. They do not all check everything and so may give you different errors and warnings.