The Add to Calendar component

This component is not supported for Google Ads, Google AdMob, AMPHTML ads , video ads , or image 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:

Open the Componentspanel, then the Date/Timefolder.
Drag the Add to Calendarcomponent to the stage.
In the Add to Calendarproperties section of the Propertiespanel, enter the event name, when it starts, and when it ends.
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 iconfor Advanced propertiesin 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 Previewbutton in the upper right corner.

Was this helpful?

How can we improve it?