How can we help you today?

How to Display Outlook Calendar Events from a Specific Time Frame

NOTEThis feature will be released in version 8.6.0.0 for SharePoint Online and is not currently available.

Want to show your users’ Outlook Calendar events from a particular time frame? The Microsoft Graph API connection makes this a breeze with its "My Events for the next week" use case. We'll walk you through the simple steps to get this up and running.


sample list of upcoming events


NOTEThe events displayed in the list will vary depending on who is viewing the page.

TABLE OF CONTENTS


Prerequisites

  • You must have ShortPoint SPFx version 8.6.0.0 and up installed on your SharePoint environment.
  • You must be a ShortPoint Designer with an active license.
  • You must have the Microsoft Graph API connection enabled. Go to How to Enable Microsoft Graph Integration for MS Graph API Connections to learn how.
  • You must authorize the necessary permissions (Calendars.Read) in the API access page. To check, go to your SharePoint Admin Center > Advanced > API access.
  • You must have the Design Element you want to use to connect on your SharePoint page. For best results, we recommend using Design Elements that allow listing of multiple items (e.g. Icon List, Image List, Simple List, etc.).
  • You must have a calendar with events:


sample Outlook calendar


Step-by-step Tutorial

Follow the steps below to get started:


Step 1: Edit the ShortPoint Web Part

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


Edit


Close the Toolbox:


close icon


Select the ShortPoint web part and click the Edit Properties icon:


Edit properties icon


Step 2: Switch to Grid Mode


NOTEShortPoint Connect is currently only available in Grid Mode.


Click the Switch to Grid Mode icon:


Switch to Grid Mode icon


Step 3: Edit the Design Element


NOTEYou can use any Design Element you want. For best results, we recommend using Design Elements that allow listing of multiple items (e.g. Icon List, Image List, Simple List, etc.). For this guide, we’ll use Events.


Click the cogwheel icon of the Design Element you’ll use:


cogwheel icon


Step 4: Connect to Microsoft Graph API

Go to the Connect tab:


connect tab


Select Microsoft Graph API:


NOTEYou need to enable the Microsoft Graph API connection before using it. Learn more about it in How to Enable Microsoft Graph Integration for MS Graph API Connections.


Microsoft Graph API


Step 5: Use the My Events for the next week Use Case

Search for My Events for the next week and select it:


My Events for the next Week



Specify the [1] Start Date and [2] End Dates:


NOTEYou can use placeholders to point to dynamic dates. Check out How To Use Placeholders In ShortPoint Connections to learn more about placeholders.


start and end dates


Select Run Query:


Run Query


Click Connect:


Connect


Step 6: Map Items

Go to the Items tab:


Items tab


Delete default content:


delete default content


Use the link icon to map the properties you want to be displayed:


link icon


You can map any property you want. In our case, we used the following properties:

  1. #subject in the Title field - shows the event names as the titles.
  2. #start_dateTime in the Start Date field - shows the starting date and time of the events.
  3. #end_dateTime in the End Date field - shows the end date and time of the events.
  4. #locations_0_displayName in the Location field - displays the location of the events.


map items


NOTECheck out ShortPoint Connect: Basic Tutorial to learn more about mapping properties.

Step 7: Save

Click Preview to see how the Design Element will look:


Preview


Click Update to apply your changes:


Update


NOTEThe events displayed in the list will vary depending on who is viewing the page.


Select the eye icon to see your page in real time:


eye icon


Once satisfied, click Save:


Save


Awesome! Your users now have a dynamic events list that they can refer to every time they open your SharePoint page.


TIPHave lots of events? Help your viewers easily find the event they’re looking for with the Search & Filter Toolbar! It lets them search, sort, and filter through events in seconds. Go to Getting Started: The Basics of the Search & Filter Toolbar to give it a try. 

Search & Filter Toolbar

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 27 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more