Add to Calendar - Google and Outlook options

Feature Requests
1

When a viewer clicks the “Add to My Calendar” button on the event details page, it automatically downloads a file named “event.ics”. Can options be added so that when the button is clicked, users are given the option to add the event to Apple Calendar, Google Calendar, Outlook Calendar OR download an .ics file? Several other calendar platforms offer this functionality.

The challenge for schools like us who are on Google Calendar is that Apple does not allow .ics files to be opened by anything but Apple Calendar on Macs, iPhones and iPads. So our community members on Macs who don’t use Apple Calendar can’t add an event directly to their CMU Google Calendar. The workaround is to instruct them to add their CMU Google account to Apple Calendar, then to open the .ics file in Apple Calendar and add it to their CMU calendar there - which is not intuitive and some folks just don’t want to do.

Thanks for considering!

2

Hi Jen,

Thanks for reaching out – that does sound tricky. Our understanding has always been that if your “default calendar app” is set to Google Calendar, that any ICAL (.ics) links will just open natively in Google. It seems like that might not be the case?

I’m not finding any syntax online for how to “Add Calendar URL” to Google Calendar outside of using the tools inside of calendar.google.com itself, hmm.

There’s the https://www.google.com/calendar/render?action=TEMPLATE syntax I see mentioned around the web for a “Add to Calendar” type link for Google Calendar, but that wouldn’t support any syncing of event changes the way the ICAL feed does. Moreover, I’m not finding anything in the Google docs about that url structure anyways.

If anyone has wrestled with Google Calendar links before, we’re all ears on alternative approaches for this! As it stands, unfortunately, I don’t know how we’d make a Google-Calendar specific link in LiveWhale (unless perhaps we just opened a modal with step-by-step instructions for “Go to Google Calendar, click Add Calendar, click By URL, etc…”). Alternatively, if anyone has other web apps they use that work elegantly with Google Calendar integrations like this, please pipe up because I’d love to peek at an example. Thanks!

3

Correct - for Apple product users there is no way to set Google Calendar as the default application for opening .ics files, it always opens Apple Calendar. Some of the other calendar platforms our units are using (and will be transitioning away from to move into LW) offer multiple Add to My Calendar options for events - including add to Google, add to Apple, add to Outlook, copy URL and download .ics file. Two examples:

Timely: Calendar - Mellon College of Science - Carnegie Mellon University
Tockify: Calendar of Events - Dietrich College of Humanities and Social Sciences - Carnegie Mellon University

In these cases when you open an event and click to add to your calendar, you see multiple options. When you click Google on a Mac or iPhone it will open Google Calendar in a web browser and ask you if you want to add the event, vs. opening the Apple Calendar app like an .ics file does. I don’t think it syncs event changes like a live ICAL feed but I don’t think downloading an event.ics file for a single event does either. As a Google school this is a functionality a lot of our folks use with calendars and the units are hoping to not lose it when they migrate to LW. Thanks!

4

Thanks Jen! Those examples are helpful, taking a look I think we may be able to figure out a Google Calendar URL syntax that would allow for similar functionality, namely

https://calendar.google.com/calendar/u/0/r?cid={ical url}

Seems to be promising: https://calendar.google.com/calendar/u/0/r?cid=http://timelyapp.time.ly/api/calendars/54703220/export?format%3Dics%26event_ids%3D78020487%26no_image%3Dtrue%26target%3Dgoogle

If you’d like to add this to your calendar theming in the meantime, feel free, but we’ll keep an eye on this and test it as a possible core feature inclusion for an upcoming release of LW. Thanks!

5

Thank you, Karl! For the future release it would be great to include an Outlook option too for external folks using that email platform. But Google is for sure the priority for us right now for our internal folks!

6

Oooh I just noticed @jwilcox already has this feature in place on the Angelo State site - on an event page, when you click Add to My Calendar you get a drop down with choices for Google, Yahoo, iCal and Outlook calendars. Jon, how did you do configure this to work? (and @karl can you check out how he did this for the enhancement request above?)

7

I think this is just out-of-the-box code. I don’t remember customizing anything here.

In a details template (CMS-only I believe), you can use the XPHP variable…

<xphp var="events_save_to_calendar" />

In our calendar template we have…

<div id="lw_cal_add_to_calendar">
    <a href="#">Add to my calendar</a>
    <ul style="display:none">
        <li>
            <span class="lw_cal_icon lw_cal_google"></span>
            <a href="{{ add_to_google }}" target="cal">Google Calendar</a>
        </li>
        <li>
            <span class="lw_cal_icon lw_cal_yahoo"></span>
            <a href="{{ add_to_yahoo}}" target="cal">Yahoo Calendar</a>
        </li>
        <li>
            <span class="lw_cal_icon lw_cal_ical"></span>
            <a href="{{ ical_download_href }}" target="cal">iCal Calendar</a>
        </li>
        <li>
            <span class="lw_cal_icon lw_cal_outlook"></span>
            <a href="{{ ical_download_href }}" target="cal">Outlook Calendar</a>
        </li>
    </ul>
</div>

That creates a dropdown like on our site, though the necessary CSS and JS must also be loaded (I assume it is by default).

You can probably also just grab those variables, such as {{ add_to_google }}, and use them in links however you like.

8

I just checked the core theme files and I don’t see any of this in there, so maybe it is old code? It still seems to work. YMMV

9

Ah, sorry for the confusion – I think the old {{ add_to_google }} variable used in the theme template Jon mentions is one using this syntax I mentioned upthread:

A little while back we updated our out-of-the-box theming to use ICAL everywhere, since it seemed like that had good+broad support, but the old add_to_google_calendar syntax is still available, if you’re OK with it creating a new static/standalone event based on the event date/time/title (i.e., not something that would stay in sync with the published ICAL version).

10

Thanks - I’ll ask our dev team to try adding that code.