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


  1. Create a SharePoint Calendar.
  2. Insert an Events element into your page and connect it with your SharePoint Calendar.


Create a SharePoint Calendar

Step 1 

Open Site Contents, choose the option Add an App.


image


Step 2

Search for the Calendar app and click it.


image


Step 3

Create a name for your calendar.


image


Step 4

Switch to All Events view by opening the Calendar tab and clicking the arrow icon as shown in the screenshot. The drop-down list will appear. Select All Events.


image


Step 5


Click New Event.


image


Step 6

Create an event by filling in all the fields you need. Press Save.


image

Step 7

Repeat  steps 5 and 6 to create as many calendar events as you need. After you are done, the list will look similar to this:


image


Insert "Events" and Connect it to the SharePoint Calendar


Step 1

Open a wiki page where you would like to display your new Events element and switch to edit mode. In the edit mode, please click on the Insert tab and choose Insert.


image


Step 2

You will see that the ShortPoint Page Builder is opened. Choose the Events element.


image


Step 3

Switch to the Connect tab and set up the location 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 second field, please choose the exact calendar you have created, in our case it's Mike's Calendar. Please choose the All Events view in the View field, this is important. After you are done, please click Connect and wait until the button becomes red.


image


Step 4

Switch to Items tab and map the fields. Please click the chain icon on the right of every row and select a column name that you would like to display. Please refer to our example. After you are done, please press Insert and save the page.


image


Here is how our final result looks like:


image


Note: Please check this article to learn how you can color-code the categories of events for convenience. Also, you can set up your calendar so that it will display only the upcoming events. You can check a tutorial on this here.