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>
)
}