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 Components panel, then the Date/Time folder.
- Drag the Add to Calendar
component to the stage.
- In the Add to Calendar properties section of the Properties panel, 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:
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.
