Add events to Google Calendar

When a calendar event is added to Interact, it's often important for the user to add this event to their usual calendar application. Existing functionality allows a user to download a standard ICS file to their device and import that event to their calendar, for something like MS Outlook or Apple Calendar.

Whilst this also works great for google calendar, it would be much easier for those users if the 'Add to calendar' button, simply opened their google calendar with a new event, containing the relevant details. This seems like a great opportunity to use some custom javascript to override the default behaviour of the 'Add to calendar' button

The javascript below can be added to the developer framework Masterpage Javascript in your intranet - once saved the 'Add to Calendar' button will simply open a google calendar tab, instead of downloading the ics file! Easy!

$(document).ready(function() {
    if (window.location.href.indexOf('Calendar/Event.aspx') > -1) {
        // Calendar event page so add google calendar button

        // Parse the dates out of the DOM
        var dates = $("#body_lblDates").text();
        var from = dates.split('-')[0].trim();
        var to = dates.split('-')[1].trim();

        var fromDate = new Date(Date.parse(from));

        if (isNaN(Date.parse(from))) {
            // from date is not valid so either today or tomorrow
            fromDate = new Date();
            if (from.toLowerCase().indexOf('today') == -1) {

                // tomorrow
                fromDate.setDate(fromDate.getDate() + 1);

            }

            var fromHour = from.split(' ')[1].split(':')[0];
            var fromMinutes = from.split(' ')[1].split(':')[1];

            if (from.indexOf('PM') > -1) {
                // it's PM so add 12 hours to end time
                fromHour = parseInt(fromHour) + 12;
            }

            fromDate.setHours(fromHour);
            fromDate.setMinutes(fromMinutes);
        }

        // use the same as from date for an initial set (covers all day events or events where only the end time is displayed)
        var toDate = new Date(fromDate);

        if (!isNaN(Date.parse(to))) {
            // If the to date can be parsed then use it
            toDate = new Date(Date.parse(to));
        } else if (to.indexOf(':') > -1) {
            // If the to date can't be parsed it's either an all day event or just an end time with no date part
            var toHour = to.split(' ')[0].split(':')[0];
            var toMinutes = to.split(' ')[0].split(':')[1];

            if (to.indexOf('PM') > -1) {
                // it's PM so add 12 hours to end time
                toHour = parseInt(toHour) + 12;
            }

            toDate.setHours(toHour);
            toDate.setMinutes(toMinutes);
        }

        // build the date and time strings as required for google querystring
        var fromFormattedDate = "";
        var toFormattedDate = "";

        fromFormattedDate = fromFormattedDate.concat(fromDate.getFullYear(), ("0" + (fromDate.getMonth() + 1)).slice(-2), ("0" + fromDate.getDate()).slice(-2));
        toFormattedDate = toFormattedDate.concat(toDate.getFullYear(), ("0" + (toDate.getMonth() + 1)).slice(-2), ("0" + toDate.getDate()).slice(-2));

        if (to.toLowerCase() != "all day event") {
            // add the time
            fromFormattedDate = fromFormattedDate.concat("T", fromDate.toLocaleTimeString().replace(/[^0-9]/g, ""));
            toFormattedDate = toFormattedDate.concat("T", toDate.toLocaleTimeString().replace(/[^0-9]/g, ""));
        }

        var dates = "".concat(fromFormattedDate, "/", toFormattedDate);
        var text = $("#body_pageTitle_divLeft").text().trim();
        var details = $("#body_lblEventDescription").text().trim().replace(/\n/g, "<br />");
        var location = $("#body_lblLocation").text().trim();

        var url = "https://www.google.com/calendar/event?action=TEMPLATE&dates=";
        url = url.concat(dates, "&text=", text, "&details=", details, "&location=", location, "&rp=false&ctz=Europe/London");

        // update the attributes on the element including the relevant accessibility attributes
        $("#body_btnGetInvite").prop("href", url);
        $("#body_btnGetInvite").prop("target", "_blank");
        $("#body_btnGetInvite").prop("title", "Add to google calendar");

        $("#body_btnGetInvite").click(function() {
            if ($("#divAttendanceButtons .btn").length > 0 && $("#divAttendanceButtons .btn-success").length == 0) {
                alert('Please remember to RSVP!');
                return false;
            }
        });

    }
});