Event Calendar
The shared calendar for organizing and promoting company events on the SharePoint intranet.
Last updated
Was this helpful?
The shared calendar for organizing and promoting company events on the SharePoint intranet.
Last updated
Was this helpful?
Event Calendar assists you in organizing and promoting events, initiatives, and meetings on your SharePoint Online intranet. Whenever an event is scheduled on the calendar, the integrated push notification system notifies users with a personalized message on Microsoft Teams. Users simply need to click on the notification to access the event page on the intranet.
Event Calendar allows you to:
Communicate corporate closures
Promote events and initiatives
Publish deadlines
If your page is not already in edit mode, click on Edit at the top right of the page.
Hover your mouse above or below an existing web part. You will see a line with a circled +, like this: .
Click on it and, in the web part search box, enter Events to quickly find and select the Event Calendar web part, which is named IAI-Events.
The layout settings allows you to customize the appearance of your application by adjusting various layout settings.
By opening this first configuration, you will see the following options:
Do you want to hide the background? You can choose to hide or display the webpart background. The default setting is “No”. This means that, by default, the webpart is characterized by a white background. If you enable this option, the white card background will be completely removed, allowing the content appear directly on the page. As a result, the webpart will be transparent, showing either the selected background image or the chosen SharePoint page color.
Do you want to hide the background shadow? You can choose whether to show or hide the background shadow. The default setting is “No”. This means that, by default, the webpart is characterized by a subtle depth effect that can make the webpart stand out more against the rest of the page. If you enable this option, the shadow behind the background will be removed, giving the web part a flatter, cleaner look without any depth.
Select the type of background shadow If you decide to set the background shadow, a further configuration will appear and you can select the style from High Contrast, Light, or Dark options.
If you select High contrast, this option creates a strong, bold shadow effect that provides a high level of contrast between the background and the content.
By choosing the Light background shadow, it will create a soft and subtle effect, giving a more delicate and gentle depth to the background.
Finally, the Dark background shadow style provides a darker, more intense effect, adding depth and emphasizing the background even more.
Do you want to hide the title? Here you can select whether to show the webpart title or hide it. If set to visible, the web part title will appear on the left side.
Enter the application title Thanks to this configuration, you can customize the application title. If you keep it blank, SharePoint will show the default title “Events” at the top left angle of the webpart.
Choose the view mode: You can select from Horizontal view, Compact view, or Compact with details. Depending on your selection, a corresponding setting will appear under Display settings to configure the chosen layout. for example: Horizontal display settings, Compact display settings, or Compact with details display settings.
It is possible to choose from three layouts: Horizontal, Compact, and Compact with details. If you select the Compact layout, you can choose to view events with a slider or a list (see pictures below).
In this section, you need to indicate the sources from which the web part will retrieve information. Event Calendar can display events from multiple Events lists. SharePoint Events lists are calendar-shaped lists collecting events.
Event lists configuration: Click on “Configure” to configure one or more Events lists.
Complete the configuration pane as follows:
- Enter the URL of the site where the Events list is located. - Enter the list URL in the required format (/sites/site/Lists/list, e.g., /sites/iai-demo-saas/Lists/Events). The Events list of the current site is added by default. - To add more lists, click the + symbol on the right and repeat the same steps. - When the configuration is complete, click Save.
Enter category site url: Enter the URL of the site where the category list is located and then you can assign a category to the event.
Thanks to this configuration, you can decide the number of events to display in the slider of events, as well as whether to show or hide the event description.
You can also choose whether to show or hide the event description. To view the description, click on the event itself — a pop-up will appear displaying the event details.
In this section, you will find a number of options to customize the layout of your calendar.
Do you want to show the site name? Choose whether the web part will display the source site name. The screenshot below offers an example.
Do you want to show the list name? Choose whether the web part will display the source list name. The screenshot below offers an example.
Choose to highlight the default event or the next event: You can also choose to highlight the default event or the next event. If you choose the former option, a colored circle will highlight the default event. The slider will show only the default event, while the list will show all the events of the month. If you choose the latter option, a colored circle will highlight the next event. The slider will show only the next event, while the list will highlight the next event and the following ones; if you want to see the previous events, you need to scroll up.
In this section, you can decide whether to show the legend within the webpart or to hide it. You can also customize the legend button name.
Here is the result with the legend:
Do you want to customize the color of the current day in case of an event? You can select a specific color for the current day in case of an event.
Thanks to this configuration, you can customize the display of the selected layout—for example, by marking holiday colors or setting a custom name for the legend button.
Show legend? You can decide whether to show the legend within the webpart or to hide it.
Enter legend button name: You can also customize the legend button name.
Choose to view events with a slider or a list: you can choose to view events with a slider or a list (see pictures below)
Choose if the Sunday should be marked as a working day or a holiday: Regarding holidays, Sundays will not be automatically highlighted as non-working days. This function allows you to choose whether to show Sunday as a working day or a holiday.
In this section, you can customize the colors of the calendar as you prefer, extending the calendar view, but also activating the scroll for the description of the event.
Customize the colors? You can select a specific color for the current day in case of an event.
Enable extended calendar view? You can enable the extended view, which specifically applies to the Compact with details layout. This option (which works only in 1/1 and 2/3 sections) provides a cleaner layout when there is more than one event on the same day.
Do you want to activate the scroll for info? If you select the Compact with details layout, you also have the possibility of activating a scroll bar for the information box. If you enable this option, the possibility of setting the height of the info section becomes available. This means that you can set a fixed height for this section and use the scroll bar to read its content. This may be useful when you have long descriptions and you don't want this section to take up too much space.
Here is the result of scrolling through the event's description:
To create a new event, take the following steps:
Click on the Settings icon on the top right of the page, then click on Site contents.
Scroll down and select the Events list.
When you click on the list, a calendar will appear. Choose the event day and click on + Add.
The following panel will appear. The fields marked with asterisks are the mandatory ones.
Title: write the title of the event.
For example: Bank holiday, Corporate convention, Webinar
Start Time: enter the start time of the event.
End Time: enter the end time of the event.
All Day Event: if the event does not start or end at a specific hour, you can mark it as an all-day activity by flagging this box.
Recurrence: you can indicate that the event is a repeating one by flagging this box.
Disable notification: you can disable Teams notifications by flagging this box. If you keep notifications enabled, users will be notified via Teams whenever a new event is published.
Audience: this field allows you to make the event visibile only to a specific group of people. If you leave this field empty, the event will be visible to the whole intranet population.
Notification date: by default, users are notified via Teams when a new event is published, but if you do not want the notification date to correspond to the publication date, you can enter a specific date in this field.
Language: this field only concerns multilingual intranets. Click on the tag icon on the right side of the field, select a Content Language to localize the event, press Select and then OK.
The Compact with details layout allows you to display a picture in the event details (see below for an example). If you want to include a picture, please click on Attach File in the top bar, and then on Choose File to upload an image from your computer. After having uploaded the image, click on OK.
Once you have completed the configuration, remember to click on Save.
You can customize an event by adding a category associated with a specific icon.
To create a category, take the following steps:
Click on the Settings icon on the top right of the page, then click on Site contents.
Select the Event categories list.
Click on +New.
A panel will appear with a number of fields to fill in.
Title: enter a title for your category.
Icon Url: copy-paste the URL of the icon you have chosen to illustrate your category. This should be a picture previously saved on SharePoint.
Click on Save.
To create the icon URL, follow these steps:
Upload the picture to the Site Assets folder in the Site contents (or any other folder on your intranet).
In the Sites Assets document library, select the picture.
Click on the Info icon at the top right of the screen.
Click on the Path icon to copy the URL of the icon.
Finally, paste the icon URL into the required field.
Click on the Edit properties button on the left of the web part to open the property pane, which has two sections: Layout settings, Data Sources, General Settings, Display settings, Horizontal display settings, Compact display settings and Compact details display settings. See below for more information on each of these sections.
Description: here you can write information and details about the event. This is the description that you will view by clicking on the Info icon ().
For further information about notification groups, please refer to our guide .
Category: here you can assign a category to the event, which will be identified by a specific icon ().
