0

I am trying to add an event to a calendar on mobile phones.

On a click of a button in my react application, i download an ics file.

What i am doing works great on android, but it seems that downloading the file on iphone reformats it and i am loosing the carriage return and line fills !

const AddToCalendar =({className}: AddToCalendarProps) => {
  const save = useRef<any>()

  // ----------- DYNAMIC INFOS START : PENDING ------------------//
  const appointment ={
    title: 'Rendez-vous Smart-Repair',
    description: 'Rendez-vous chez votre concessionnaire',
    location: 'Poitiers',
    startDate: new Date(),
    endDate: (new Date()).setHours(23),
  }
  const appointmentDetails = [
    "BEGIN:VCALENDAR",
    "VERSION:2.0",
    "BEGIN:VEVENT",
    "METHOD:REQUEST",
    "DTSTART:" + convertDateToUTC(appointment.startDate),
    "DTEND:" + convertDateToUTC(appointment.endDate),
    "SUMMARY:" + appointment.title,
    "DESCRIPTION:" + appointment.description,
    "LOCATION:" + appointment.location,
    "BEGIN:VALARM",
    "ACTION:DISPLAY",
    "TRIGGER:-PT15M",
    "REPEAT:1",
    "DURATION:PT15M",
    "ACTION:DISPLAY",
    "DESCRIPTION:Reminder",
    "END:VALARM",
    "END:VEVENT",
    "END:VCALENDAR"
  ].join("\r\n");
  // --------------------DYNAMIC INFOS END--------------------------- //

  useEffect(() => {
    save.current = document.createElement('a')
  },[])
  
  const handleAddToCalendar = () => {
   const URL = "data:text/calendar;charset=utf8," + appointmentDetails
    save.current.href = URL
    save.current.target = '_blank'
    save.current.download = 'newEvent'
    var evt = new MouseEvent('click', {
      'view': window,
      'bubbles': true,
      'cancelable': false
    });
    save.current.dispatchEvent(evt);
  }

  return (
    <div className={className} onClick={handleAddToCalendar}>
      <Image src="/assets/icons/add_calendar.svg" width={40} height={40} alt="calendar icon" />
        <Paragraph className='add-btn' text='ADD_APPOINTMENT_TO_CALENDAR' />
    </div>
  )
}
julBayonna
  • 409
  • 7
  • 19

0 Answers0