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 drop-down 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 that 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 that the event begins. Can be bound to dynamic data. |
Start time | The time that the event starts (in 24-hour time). Can be bound to dynamic data. |
End date | The date that the event ends. Can be bound to dynamic data. |
End time | The time that the event ends (in 24-hour time). Can be bound to dynamic data. |
Time zone | (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 drop-down 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 customise the appearance of the drop-down 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 colour | The background colour used for the drop-down menu. |
Font colour | The font colour used for the drop-down menu. |
Font name | The font used for the drop-down menu. |
Font size | The font size used for the drop-down menu. |
Font weight | The font weight used for the drop-down menu. |
Highlight colour | The highlight colour used for the user's selection in the drop-down 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.