Generate and download an iCal event in SharePoint

Here’s a quick way to automatically generate downloadable iCal files for SharePoint events, where the events are managed in a custom list, and displayed using a Content Query Web Part and a custom XSL template.

For starters, reference my general post on using XSLT to customize CQWP output.

In this example, I’m just going to lay out a few basic parameters, rather than displaying an entire template.

THE LIST

Make sure each event has the following columns:

  • Title: Single line  of text
  • Description: Multiple lines of text
  • Location: Single line of text
  • StartTime: Date/time field
  • EndTime: Date/time field

THE CQWP

Set the custom fields to match the above.

JAVASCRIPT PLUGIN

We’re going to use a jQuery plugin called ics.js available on Github. Pass it a few parameters, and it automatically generates the ical code and makes it available for download.

The only file you need is the minified code with dependencies included, called ics.deps.min.js. Add that to your Style LIbrary, and add a reference to it in your master page.

You’ll also need to make sure you’re using jQuery.

XSLT

Edit the ItemStyle.xsl file at Style Library -> XSL Style Sheets -> ItemStyle.xsl.

Make sure you have included the ddwrt date-formatting library at the top of the file:

xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"

In your custom event template, add the following code:

<!-- Format SharePoint dates into values that ical.js will understand -->
<xsl:variable name="StartDate" select="ddwrt:FormatDate(string(@StartTime),1033,2)" />
<xsl:variable name="EndDate" select="ddwrt:FormatDate(string(@EndTime),1033,2)" />

<!-- Event wrapper div. In this example, has class "event-content" -->
<div class="event-content">
    <!-- Hidden div with event information as data attributes
    <div class="hide iCal-data" data-event-title="{@Title}" data-event-description="{@Description}" data-event-location="{@Location}" data-event-start="{$StartDate}" data-event-end="{$EndDate}">
        .
    </div>
    <!-- Button to download event as ics file -->
    <div>
        <a class="btn btn-primary" onclick="download_event(this);">Save event</a>
    </div>
</div>

The XSLT code does three things:

  1. Converts the SharePoint start/end dates into the format “11/10/2016 7:00 pm”, which iCal.js can parse
  2. Writes the Title, Description, Location and Start/End times into a hidden div with the class “iCal-data”, so that our custom JS function can grab it. The div has a period in it because XSLT doesn’t like empty divs.
  3. Calls our custom JS function, download_event(), when the “Save event” button is clicked.

Note that the above is using Bootstrap, so the “hide” class hides the data div. If you’re not using Bootstrap, do whatever you like to set that div to “display:none;”.

Similarly, the “Save Event” button is using the Bootstrap classes “btn btn-primary”. If you’re not using Bootstrap, remove those classes and substitute your own custom styling.

Custom javascript function

Add this function to your custom javascript file:

function download_event($this) {
    //Locate hidden data div for this event
    $event = $($this).closest('.event-content').find('.iCal-data');

    //Grab the event data and put into variables
    $title = $($event).attr('.data-event-title');
    $location = $($event).attr('.data-event-location');
    $description = $($event).attr('.data-event-description');
    $start = $($event).attr('.data-event-start');
    $end = $($event).attr('.data-event-end');

    //Call the ics.js code, pass it the event data, and trigger the download prompt
    var cal = ics();
    cal.addEvent($title, $description, $location, $start, $end);
    cal.download();
}

The comments are pretty self-explanatory. The code finds the data for this particular event, throws them into variables, then creates an ics.js object, adds the event to it with the ics.js addEvent() method, then prompts the user to download it using the ics.js download() method.

Categories: App Development.