To create a connected Events element and use it on your page, you will need to complete the following:


Part 1. Create a SharePoint Calendar.

Part 2. Connect the ShortPoint Events Element with the created Calendar.

Part 1. Create a SharePoint calendar

Step 1 


Open the Site Contents of your site.


From there,

in modern experience:

  • click the New button and choose App from the drop-down:



in classic experience:

  • click the add an app tile:


Step 2

Look for the Calendar app and click it.


Step 3

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

After typing it in, please click Create.


Step 4


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 element. The element will be picking up all changes dynamically be default.


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


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


Step 1: Open the Page Builder


Open the page you want the 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 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 Element from the Page Builder


Choose the Events element from the list of elements in the Page Builder.


Step 3

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. 



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



Set the time zone you want to use to display the date and time in the Preferred Time Zone field:




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 field.

Map the fields of the Events 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.

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

Click Insert when ready.




Here is what we will receive as a result, in the View Mode of the page:



Note: Please check this article to learn how you can color-code the categories of events for convenience. 

Related articles: