The Add to Calendar component

This component is not supported for Google Ads, Google AdMob, or AMPHTML ads.

The Add to Calendar component lets users add event reminders 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 work for only one of the supported calendar types, or for multiple types. When you allow multiple types, the user selects their calendar from a dropdown menu. When you allow only one calendar type, the component immediately opens the calendar (or downloads the iCalendar event).

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, enter the event name, when it starts, and when it ends.
  4. By default, the component is transparent. You can place it over a visible element so the user knows where to click in order to activate the component.

Properties

Property Description
Name The component name.
Event The event name as it will be seen in the user's calendar. Can be bound to dynamic data.
Start date The date the event begins. Can be bound to dynamic data.
Start time The time the event starts (in 24-hour time). Can be bound to dynamic data.
End date The date the event ends. Can be bound to dynamic data.
End time The time the event ends (in 24-hour time). Can be bound to dynamic data.
Timezone (Optional.) The time zone for the event. When this property is set, the time adjusts for the user when the user is in a different time zone. Can be bound to dynamic data.
Location (Optional.) The location for the event. Can be bound to dynamic data.
Description (Optional.) The description of the event. Can be bound to dynamic data.
Calendar type

Supported calendar types:

  • iCalendar
  • Google
  • Windows Live
  • Yahoo

If you select multiple types, the user chooses one from a dropdown menu after clicking the component. If you select a single type, clicking the component opens the calendar or downloads the iCalendar file.

Advanced properties

The advanced properties let you customize the appearance of the dropdown menu when you've selected multiple calendar types. To show the advanced properties, click the expand icon for Advanced properties in the component properties pane.

Advanced property Description
Background color The background color used for the dropdown menu.
Font color The font color used for the dropdown menu.
Font name The font used for the dropdown menu.
Font size The font size used for the dropdown menu.
Font weight The font weight used for the dropdown menu.
Highlight color The highlight color used for the user's selection in the dropdown menu.

Preview

This component can't be previewed inside the Google Web Designer interface. To see the component in action, preview your document in your preferred browser by clicking the Preview button in the upper right corner.

Was this helpful?
How can we improve it?