Adding and Configuring Add to Calender on a Webpage

Overview

The Add to Calendar section allows users to display calendar links on a webpage so participants can easily add event dates to their preferred calendar applications. Using the Web Builder, users can add and configure the Add to Calendar section by defining titles, calendar links, target behavior, and visibility settings.

Step-by-Step Approach

1. Access the Web Builder

• From the Event dashboard, navigate to the Content module.
• Select the Pages submenu.
• Open the required webpage in edit mode.

2. Drag and Drop Add to Calendar

• From the component panel, locate the Add to Calendar component.
• Drag and drop the component into the desired section of the webpage.

3. Enter or Edit the Component ID

• Select the Add to Calendar component.
• Enter or edit the ID field in the settings panel.
• The ID can be used for navigation, styling, or tracking purposes.

4. Enter or Edit the Title

• Enter or update the title displayed for the Add to Calendar section.

5. Select Dependency from Dependency Select Field

• Select a dependency if required.
• The Add to Calendar section displays or hides based on the configured dependency conditions.

6. Select Section Version Type

• Select the appropriate option from the Section Version Type select field.
• This controls which version of the Add to Calendar section is displayed on the webpage.

7. Enter or Edit Title for Each Calendar

• Enter or update the title for each calendar option (for example, Google Calendar, Outlook, or iCal).
• The title is displayed as the selectable calendar option on the webpage.

8. Enter or Edit URL for Each Calendar

• Enter or update the URL for each calendar option.
• Ensure the URL points to the correct calendar event.

9. Select Target for Each Calendar

• Select the target option for each calendar link (such as opening in the same tab or a new tab).
• Apply the target setting individually for each calendar option.

10. Manage the Add to Calendar Section

• Reposition the Add to Calendar section using drag-and-drop within the page layout.
• Remove the Add to Calendar section if it is no longer required.

11. Save and Apply Changes

• Save and publish the webpage to apply the Add to Calendar configuration.
• Preview the webpage to confirm that the calendar links display and function correctly.