icalendarwebcalchrome-ios

webcal:// protocol - creating ical reminders on Chrome iOS - hide subscribed URL from prompt?


I have a button on a website that adds a calendar event on click. I am using ics.js for most browsers, but a different solution on Safari on iOS, and with Chrome browser on iOS I have had to implement a webcal:// solution.

On click, URL opened is webcal://mysite.com?calreminder=[title]&time=[time]

Then server side we generate this output:

function reminder_output()
{
    if (isset($_GET['calreminder'])) {
        $title = $_GET['calreminder'];
        $time = $_GET['time'];

        $now = new DateTime();
        $start = new DateTime('tomorrow ' . $time);
        // event duration is 10 minutes
        $duration = new DateInterval('PT10M');
        $end = $start->add($duration);

        header('Content-Type: text/calendar; charset=utf-8');
        header('Content-Disposition: attachment; filename="My-Site-Reminder.ics"');
        $calData = array(
            'BEGIN:VCALENDAR',
            'PRODID:-//My Site//Reminder//EN',
            'VERSION:2.0',
            'BEGIN:VEVENT',
            'RRULE:FREQ=DAILY;INTERVAL=1',
            'DTSTAMP:' . $now->format('Ymd') . 'T' . $now->format('His'),
            'UID:4088E990AD89VW3DBB4849094',
            'DTSTART:' . $start->format('Ymd') . 'T' . $start->format('His'),
            'DTEND:' . $end->format('Ymd') . 'T' . $end->format('His'),
            'SUMMARY:' . $title,
            'DESCRIPTION:' . $title,
            'X-ALT-DESC;FMTTYPE=text/html:' . $title,
            'END:VEVENT',
            'END:VCALENDAR'
        );
        $calData = implode("\r\n", $calData);
        echo $calData;
        exit;
    }
}

That opens this prompt:

Prompt in Chrome on iOS useing webcal://

That is all working fine, however ideally I would like to hide the URL from the display and instead show the name of the event: 'Would you like to subscribe to [Event Name]?'

I know it must be possible to do it because they do it on https://www.addevent.com/add-to-calendar-button :

Prompt on AddEvent

However, I have no idea how to get this to display in this way instead of showing the URL. Does anyone know?


Solution

  • The name of the calendar, which appears in the prompt, can be set by including...

    X-WR-CALNAME:Your Custom Name

    ...in the body of the ics output.