This article will demonstrate how to create an all-day events view in a SharePoint Events calendar. In this view, only events that are tagged all day will be shown:
In addition, you will learn how to connect the said view to an Events Design Element to showcase only all-day events on your SharePoint page.
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have an Events Design Element on your page.
- You must have an Events calendar with all-day events.
Interactive Tutorial
Start the interactive tutorial to learn how to show only all-day events on your page:
Step-by-step Tutorial
The steps have been divided into two parts. Follow both parts to successfully start showcasing all-day events on your page.
Part 1: Create an All Day Events View
This section demonstrates how to create a view that only displays all-day events.
Step 1: Open All Events View
- Go to your SharePoint Calendar and select the Calendar tab:
- Under the [1] Current View drop-down, choose [2] All Events:
Step 2: Create View
- Go to the List tab:
- Click Create View:
- Choose the view type you want to use. For this guide, we’ll use Standard View.
- Name your View:
- Make sure that there is a check mark in All Day Event:
Scroll down until you see Filter and select Show items only when the following is true:
Set up the following properties:
- [1] All Day Event
- [2] is equal to
- [3] Yes
- Click OK to apply your changes:
You will now only see all-day events. You may now proceed to Part 2.
Part 2: Connect the All Day Events View
This section demonstrates how to connect the created view to an Events Design Element.
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit:
- Close the Toolbox:
- Click the 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:
Step 3: Edit the Events Design Element
NOTEBefore proceeding, make sure you already have an Events Design Element on your page. If you don't have one yet, check out How to Customize the Events Design Element.
- Hover over the Events Design Element and click the cogwheel icon:
Step 4: Connect
- Go to the Connect tab.
- Select the connection type you want to use. For this guide, we’ll use Current Site.
- Select the name of your SharePoint Calendar:
- Choose the name of the view you created in part 1:
NOTEThe options that appear depend on the connection type you’re using. Just make sure that in the View drop-down, you select the view you created in part 1. Check out Connection Types for more details about the connection type you want to use.
- Once satisfied, click Connect.
Step 5: Map Items
- Go to the Items tab.
- Delete all default content.
- Use the link icon to map the properties you want to display:
- Make sure that the All Day Event property is mapped. This is an automatically mapped item.
Step 6: Save
- Click Preview to see how your Design Element will look.
- Once satisfied, click Update.
- Click the eye icon to see your page in real-time:
- Save your changes:
Congratulations! You can now show only all-day events on your SharePoint page:
Related articles: