Search
Clear search
Close search
Google apps
Main menu

Add to Calendar

This component allows you to add events to calendars via desktop or through mobile devices. It will also enable users to download a dynamically created iCalendar (ICS) file and can also return Google, Yahoo, and Windows Live calendar URLs to add calendar events.

The component allows downloading of ICS files on all browsers except for Safari. For users with mobile devices, both Android OS (4.4 and above) and IOS (v8.1.1) are able to download ICS files. Some mobile devices may require the user to download an app that opens ICS files in order to add the event to their calendar.

Prerequisites

  • Your creative must be built as an HTML5 creative.
  • You must import the DoubleClick Studio Enabler JavaScript into your HTML file to support the component.

To use the Add to Calendar component

Step 1: Import the Polymer JavaScript environment

First of all, you need to import the Polymer JavaScript into the <head> tag of your HTML file. Polymer allows creation of custom HTML elements that are reusable, encapsulated, and can work for both desktop and mobile. It should be placed before any custom elements in your HTML file.

Insert it into a script tag:

<script src="https://www.gstatic.com/external_hosted/polymer/custom.elements.min.js">
</script>
Step 2: Import the Add to Calendar JavaScript

Add the Add to Calendar JavaScript into your HTML file. This includes all the functions needed in order to use the component. Insert it into a script tag:

<script src="https://www.gstatic.com/ads/ci/addtocalendar/1/addtocalendar_min.js"></script>
Step 3: Instantiate the component

There are two ways to instantiate the component into the DOM:

Declaratively

<ci-addtocalendar id="addtocalendar-component" filename="my_calendar_event">
  <h2 data-event-summary>My Calendar Event</h2>
  <p data-event-description>My calendar event description</p>
  <p data-event-location>New York, NY</p>
  <p data-event-startdate>2014/08/11 21:00 GMT</p>
  <p data-event-enddate>2014/08/11 21:30 GMT</p>
</ci-addtocalendar>

Then in your JavaScript file, add the component to the DOM:

var addToCalendar = document.getElementById('addtocalendar-component');

Via JavaScript

var addToCalendar = document.createElement('ci-addtocalendar');

or

var addToCalendar = new ci.calendar.AddToCalendar();
When instantiating the component via JavaScript, make sure that you append children elements with the supported attributes before appending the component to the DOM. For an example, see the following code snippet:
 
var summaryValue="My Calendar Event";
var descValue="Test description";

var summaryTextNode = document.createTextNode(summaryValue);
var descriptionTextNode = document.createTextNode(descValue);

var p = 'p';
var summaryNode = document.createElement('h2');
var descriptionNode = document.createElement(p);

summaryNode.setAttribute('data-event-summary', '');
descriptionNode.setAttribute('data-event-description', '');

summaryNode.appendChild(summaryTextNode);
descriptionNode.appendChild(descriptionTextNode);

addToCalendar.appendChild(summaryNode);
addToCalendar.appendChild(descriptionNode);

document.body.appendChild(addToCalendar);
Step 4: Set up the attributes of the component

To add an event to the calendar, you need to have values added into the custom element.

Listed below are the attributes of the component:

Attribute name Description
filename Filename for the iCalendar(ICS) file. It accepts special characters.
data-event-summary Summary of the calendar event, this serves as title of the event.
data-event-description Description of the calendar event.
data-event-location Location of the calendar event.
data-event-startdate Start date of the calendar event. Should follow RFC822 format. *

Recommended formats:
YYYY/MM/DD
MM/DD/YYYY
YYYY-MM-DD
MM-DD-YYYY
Jan. 1, 2014
January 1, 2014
data-event-enddate End date of the calendar event. Should follow RFC822 format. *

Recommended formats:
YYYY/MM/DD
MM/DD/YYYY
YYYY-MM-DD
MM-DD-YYYY
Jan. 1, 2014
January 1, 2014

* For more information, see the Date and Time Specification on the IETF Tools website.
* Please note that when adding an event in Yahoo calendar, please make sure that it will not last more than 4 days since it is a limitation of the component.
* Also note that the Calendar component does not allow you to set an alert in the generated event.

Step 5: Add listeners for button interactions

Once you have set up the attributes, you can then add events for the button elements in your HTML file. You can also include custom counters, if needed.

Listed below are the methods you can use for this component:

Method name Description
downloadICS(); Downloads the iCalendar file.
getGoogleCalendarURL(); Returns a Google Calendar URL.
getYahooCalendarUrl(); Returns a Yahoo Calendar URL.
getWindowsLiveCalendarUrl(); Returns a Windows Live Calendar URL.
isDownloadICSSupported(); Returns whether the browser supports downloading iCalendar files or not.
dispose(); Removes the addtocalendar custom element from the DOM.

Example usage:

downloadCalendarButton.addEventListener('click', function() {
  addToCalendar.downloadICS();
  Enabler.counter('Download ICS File Counter');
});

googleCalendarButton.addEventListener('click', function() {
  Enabler.exitOverride('Google Calendar Exit', addToCalendar.getGoogleCalendarUrl());
});
Was this article helpful?
How can we improve it?