Clear search
Close search
Google apps
Main menu

The Add to Calendar component

The Add to Calendar component is an element you can position over any part of the screen, that lets you create event reminders that users can add to their calendars. The component supports Google, Yahoo!, and Windows Live calendars, as well the iCalendar format.

The desktop version of Safari does not support iCalendar downloads.

You can configure the component to use multiple calendar types, or to use only one of the supported calendars. When you use multiple types, the user can select their calendar from a dropdown menu. When you use only one calendar type, the button immediately opens the calendar (or downloads the iCalendar event). This gives you some flexibility, and also lets you use the component in ads that are too narrow to display the entire dropdown menu.

To use the Add to Calendar component in your project:

  1. Open the Components panel, then the Interaction folder.
  2. Drag the Add to Calendar component to the stage.
  3. In the Add to Calendar properties section of the Properties panel, configure the component by setting its properties (described below).


Property Description
Name Sets the component name.
Event The event name as it will be seen in the user's calendar.
Start date The date the event begins.
Start time The time the event starts (in 24-hour time).
End date The date the event ends.
End time The time the event ends (in 24-hour time).
Timezone (Optional.) Lets you specify the time zone for the event. When this is set, the time will be adjusted correctly for the user when the user is in another time zone.
Location (Optional.) The location for the event.
Description (Optional.) The description of the event.
Calendar type Lets you choose which calendar types you support. Choosing multiple types will show a dropdown menu when the user clicks the component. Choosing a single type will open the specific calendar, or download the iCalendar file when the user clicks the component.

Advanced properties

The advanced property settings let you style the dropdown menu when there are multiple calendars under one button. Click the expand icon  next to Advanced properties in the component properties pane to edit the following advanced properties:

Advanced property Description
Background color Sets the background color for the dropdown menu.
Font color Sets the font color.
Font name Sets the font name. Google fonts that have been added to your project can be specified as well as the default web fonts.
Font size Sets the size of the font in the dropdown menu.
Font weight (Optional.) Sets the font weight.
Highlight color Sets the color for the highlight for the user's selection in the dropdown menu.


Components can't be previewed inside the Google Web Designer interface. To see the component in action, preview your ad in your preferred browser.

Was this article helpful?
How can we improve it?