How to Connect ShortPoint Events Design Element to a SharePoint Calendar

In this solution article, we will show you how to create a connected ShortPoint Events Design Element and use it on your page.

TABLE OF CONTENTS

• This article is for you if
• Part 1. Create a SharePoint calendar
  • Step 1. Add a new app
  • Step 2. Select Calendar
  • Step 3. Name your Calendar
  • Step 4. Add events to the newly created Calendar
• Part 2. Connect the ShortPoint Events Design Element with the created calendar
  • Step 1. Open the Page Builder
  • Step 2: Choose the Events Design Element from the Page Builder
  • Step 3. Set up the Connection
• Result

This article is for you if

• You have ShortPoint installed on your SharePoint sites(s).
• You are a ShortPoint user with an active license.

Part 1. Create a SharePoint calendar

Step 1. Add a new app

Open the Site Contents of your site.

From there:

• in a modern experience:

Click the New button and choose App from the drop-down:

• in a classic experience:

Click the add an app tile:

Step 2. Select Calendar

Look for the Calendar app and click it.

Step 3. Name your Calendar

You will be prompted to create a title for your calendar. 

After typing it in, please click Create.

Step 4. Add events to the newly created Calendar

You will now see your newly created calendar in the Site Contents with a new! label. Please click it to open.

To add an event to the calendar, please hover over the day on which the event should be created and click Add.

You will be prompted to add a new event. Fill in all the necessary details that you plan to display later in your SharePoint Site Page.

After you are done with adding the event details, please click Save:

Your event will now appear in the calendar. You can add more events the same way:

After you have added everything you need into the calendar, you can proceed with Part 2 of this tutorial.

Note: You can continue adding, editing or deleting events in this calendar after part 2 is done, and the calendar is displayed in your page in the Events Design Element. The Events will be picking up all changes dynamically be default.

Part 2. Connect the ShortPoint Events Design Element with the created calendar

In this part, we will be inserting the Events Design Element into a page and connecting it to the calendar we prepared.

Step 1. Open the Page Builder

Open the page you want the Design Element to be inserted into.

• in a modern  page:

Open the page in edit mode and click the plus icon to add a web part:

Select ShortPoint from the list of web parts:

Here is what you will see after adding the web part. Let us remove the default Note Design Element by hovering over it and clicking the cross icon:

Click inside the Row (1) and click the blue Insert button (2) to open the ShortPoint Page Builder:

• in a classic page:

Open the page in edit mode, click the Insert tab in the Ribbon (1) and then the blue Insert button (2) to open the Page Builder:

Step 2: Choose the Events Design Element from the Page Builder

Choose the Events Design Element from the Page Builder grid.

Step 3. Set up the Connection

Switch to the Connect tab and set up the connection for your calendar. We have chosen Current Site, because we are storing the calendar on the same site we store the site page that we are modifying. 

Note: You may also choose the Other Sites and SharePoint Site URL connection types if your calendar is located not on the current Site Collection.

In the Connect tab (1), please choose the calendar you would like to connect to. Click List / Library (2) and select the name of your created calendar from the drop-down. In our case it is Product Team Vacations Calendar. 

Choose a view if you prefer to use a custom SharePoint view. We will keep it simple and use the default Calendar (3) view.

Note: The Calendar view returns only events for the upcoming month.

Starting from ShortPoint version 6.9.30.6 you can set the period in number of days, months, or years you want to display through the Days Limit field and the number of items you want to list through the Items Limit field. In our example, we are setting the Days Limit to 14 days.

Note: The default Days Limit is 30 days to display the events for upcoming month only.

You can choose to show an expanded view of your recurring events, or show only one event, in the Recurring Events field. 

Note: For more information on these features, please check this article: Introducing Dynamic Connection Improvements for ShortPoint Events.

After you are done, please click Connect.

In case the connection is established successfully, you will see the interface light up with green.

You will be prompted to switch to the Items tab to finish setting up the connection:

Please switch to the Items tab. Map the fields of the Events Design Element with the columns of your SharePoint calendar.

Most of the fields are mapped automatically, but you are able to modify everything the way you want.

Note: For detailed information on Items mapping, please check the Step 4 of this article: ShortPoint Connect: Basic Tutorial.

Click Insert when ready.

Finally, save and/or republish the page.

Result

That's it. Here is what we will receive as a result, in the View Mode of the page:

Note: Check this solution article to know more about Events: Introducing ShortPoint Events Design Element.

Related articles:

• ShortPoint Connect - Introducing the New User Experience
• Introducing Dynamic Connection Improvements for ShortPoint Events
• How to Connect Events to a SharePoint Calendar
• SharePoint Setup: Modify SharePoint Regional Settings to Use Further in ShortPoint Elements
• Introducing ShortPoint Events Design Element 
• How to Map Events Categories with Colors and Icons in ShortPoint