How to Insert "Add to my calendar" Link to ShortPoint Events Design Element

By default, when you click on a connected Events Design Element, you will be redirected to the Classic view of the selected event. As you may notice, the Classic View of the Event page does not have the option to add the event to your calendar.

This article will demonstrate how to redirect the selected event to the Modern page view with the Add to my calendar option.

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Part 1: Get the event item page URL
    • Step 1: Create a Blank Page
    • Step 2: Insert the Events Web Part
    • Step 3: Copy the URL of an event
  • Part 2: Update the Connected ShortPoint Events Design Element
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Switch to Grid Mode
    • Step 3: Edit the ShortPoint Events Design Element
    • Step 4: Paste the copied URL
    • Step 5: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed for your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must have a connected Events Design Element on your SharePoint page.

Step-by-step Tutorial

The steps have been divided into two parts. Follow both parts to start:

Part 1: Get the event item page URL

Part 1 involves creating a new page to retrieve the event item URL that will be used for Part 2 of this tutorial.

Step 1: Create a Blank Page

Go to the SharePoint page you want to use and click New:

Select Page:

 Choose [1] Blank. Then, click [2] Create page:

NOTEAfter retrieving the event item page URL, you can delete this page.

Step 2: Insert the Events Web Part

Click the gray plus icon:

Use the search bar to look for Events and click it:

Click Publish:

Step 3: Copy the URL of an event

Click on any event:

NOTEIf you do not have any events, simply click + Add event to add one:

Copy the URL of the selected event. Make sure to take note of this as you will need it on Part 2.

Part 2: Update the Connected ShortPoint Events Design Element

Part 2 involves pasting the copied URL into the connected ShortPoint Events Design Element. Make sure you already have a connected ShortPoint Events Design Element on your page before proceeding.

NOTECheck put ShortPoint Connect: Basic Tutorial to learn more about the Connect feature.

Step 1: Edit the ShortPoint Web Part

Go to the SharePoint page you want to use and click Edit:

Click the ShortPoint tag:

Select the pencil icon:

Step 2: Switch to Grid Mode

NOTEShortPoint Connect currently can only be accessed using Grid Mode.

Click Switch to Grid Mode icon:

Step 3: Edit the ShortPoint Events Design Element

Scroll until you see the connected ShortPoint Events Design Element and click the cogwheel icon:

Step 4: Paste the copied URL

In the Items tab, scroll down until you see Link and delete its content:

Paste the URL you got from Part 1 in the Link field:

Then, replace the value after ItemId= with #ID.

Under Linking Options, select new-window:

Then, click Update:

Step 5: Save

Click the eye icon to see your page in real-time:

Click Save to apply your changes:

That’s it! When you click on an event, you will now be redirected to the modern view of the events page with the Add to my calendar option.

Related articles:

• Introducing ShortPoint Events Design Element 
• CSS Customized Look for Events Design Element
• ShortPoint Connect: Basic Tutorial
• How to Connect Events to a SharePoint Calendar