It's Week v of our Web Role Wed blog series about Modern SharePoint web parts! This calendar week we're looking at some web parts related to dates and events: the Events web part, the Group Calendar spider web part, and the Inaugural Timer web office.

Events web function

image

The Events spider web role displays upcoming events (that is, items from a SharePoint Events list) from various scopes in your tenant. The default view is a filmstrip-fashion view of upcoming events.

image

Events web function configuration

In the configuration pane, you would first desire to select a telescopic for events to display. This tin be anything from a single Events list on the current site, to an assemblage of all Events lists throughout your tenant. If the Events spider web part is placed on a Hub site, and then there volition too be a selection for showing events from associated sites. The terminology in the dropdown is slightly confusing, as "This site" means the current site, even if it's a subsite (as opposed to "This site collection"), just "All sites" an "Select sites" refer to other site collections, not subsites. "Select sites" gives you a checklist of all site collections you have admission to, so you tin can select one or more of them.

Note that the brandish of aggregated events is dependent upon SharePoint Search, every bit described in this Microsoft support article referenced inside the web role. This applies to any telescopic other than "Events list on this site". [During testing, information technology seems there are currently some issues with the Managed Properties required for aggregation in the Events web part. We are investigating.]

image

Other configuration options allow you to filter by an event category (such as Meeting, Holiday, etc), to select a timeframe (such as This Week, This Calendar month, etc), the layout (filmstrip or compact), and the number of events to display (the default is 20).

image

image

Note that if the spider web part is in a 1/3 surface area of a page department, and so it will automatically apply the Compact layout.

Events web part usage

Later on the page is saved, users can click on an event tile to open it (in the same browser tab), and they can click on + Add Event to add an particular to the underlying events listing. A very cool feature here is that if you add together an event in this way, you tin also add an address (which generates a map), an paradigm, an online meeting link, and additional rich text information. However, you can only view those extra fields when navigating to the upshot from the Modernistic page. The new result is saved in the SharePoint Events list, but if you view the effect from within the Events list or its classic calendar view, you won't see the "Mod" fields.

image

Another important caveat to the Add Consequence feature is that all added events will be saved to the default Events list on the current site, even if the Events spider web part is displaying items from other sites. In improver, if you did select a scope other than "Events list on this site", users volition not meet events they've added in the spider web part right away, as their visibility volition be dependent upon the SharePoint Search clamber.

Users tin can also click on Add to my calendar in an result tile, to download an .ics file to salve in their personal calendar – that'southward a pretty nifty characteristic!

image

Clicking on See All within the Events spider web part takes you lot to a folio which displays all of the events in this listing in a similar tiled view, and also allows you to specify a date range, category or to view a dissimilar events list. Irresolute these settings here doesn't affect the Events web part display, they're simply for the users to go a different view of the events in this list. If the Events web role is configured to display events from more than than a single Events listing on the current site, then there will not exist the option to switch lists.

image

Note that the Events web part doesn't brandish recurring events at all, and yous can't add a recurrence when calculation an event from the Events Spider web Part. Microsoft has stated that there are no current plans (as of May 2019) to add this functionality, as you can brandish recurring events in the Group Calendar web function. However, those are different events… read on.

Group Agenda Spider web Role

image

The Grouping Calendar spider web role displays a selected number of events from the Outlook calendar related to a single Office 365 Grouping. Past default, information technology displays events from the Grouping related to the current SharePoint page, simply yous could select a dissimilar Group if you wish, via the Edit pane. In add-on, the Edit pane allows you to select the number of events to brandish, from 1 to 10, with the default existence 3.

image

Annotation that there'southward a Refresh icon in the upper right, which allows users to refresh the calendar later calculation an result. Too, yous can view either Upcoming or Past events using the tabs at the top of the web part. In addition, there's a pocket-size icon in the lower right corner of an outcome if it'due south a recurring event. Clicking on an result will open up a popup window showing the event's details and allowing users to add together it to their calendars, but y'all cannot add or edit events from this web office.

image

Countdown Timer web part

image

And finally, nosotros'll take a quick look at the Inaugural Timer web part. This web part is a nice style to add together a countdown to a special event on your SharePoint page.

After adding the web office, you lot can type directly into the web part to add together a title. And then in the configuration pane, the master thing you need to do is enter a engagement and time to count down toward. Notation that if you enter a appointment in the past, then the web function shows the fourth dimension elapsed since then – essentially a "count up" timer. And so you tin specify how yous want the remaining time to be displayed – days only, or including hours, minutes, and fifty-fifty seconds.

In that location are also options to include a Telephone call to Activeness link and to add an image, to really make the countdown stand out.

image

Below is an example of a finished Countdown Timer. Imagine using this for countdowns to corporate or social events, or to major holidays.

image

That completes our tour of date-related modernistic SharePoint web parts. Adjacent week we'll dive into the Highlighted Content spider web part, which has quite a lot of configuration available.