Calendar Overlay

Table of contents

Getting started with the Calendar Overlay

Add the Calendar Overlay for your organization

  1. Go to your tenant’s SharePoint App Catalog.
  2. Upload or drag and drop the cloudwell-calendar-overlay.sppkg to the App Catalog.
    Upload the Calendar Overlay app package to the SharePoint app catalog.
    This deploys the client-side solution package. Because this is a full trust client-side solution, SharePoint displays a dialog and asks you to trust the client-side solution to deploy. Notice how the domain list in the prompt includes SharePoint Online. This is because the content is either served from the Microsoft 365 CDN or from the App Catalog, depending on the tenant settings.

    Ensure that the Make this solution available to all sites in the organization option is selected, so that the web part can be used from the Microsoft Teams side and then click Deploy.

  3. In the SharePoint admin center, click Advanced > API access in the left navigation. Select each of the pending requests from the Cloudwell Calendar Overlay package and click Approve.

    At this point, the web part is deployed and is automatically available cross the SharePoint Online sites.

Make the Calendar Overlay app available in Microsoft Teams

To make your web part available in Microsoft Teams, you’ll have synchronize your solution with teams.

  1. Select the cloudwell-calendar-overlay package in the SharePoint tenant App Catalog and select the Sync to Teams button in the ribbon on the Files tab.
    Sync the app to Microsoft Teams.
  2. Confirm that you can see the status message in the top-right corner.
  3. Move to the Microsoft Teams side and check the App Catalog status by selecting Apps from the left navigation.
    View apps
  4. Wait until your tenant-specific apps selection is visible:
    Teams company apps
  5. Confirm that you can see the Calendar Overlay app in the catalog:
    Calendar Overlay in Teams apps

Add the Calendar Overlay to a SharePoint page

  1. Go to the page where you want to add the Calendar Overlay.
  2. Click edit at the top right of the page:
    Edit a SharePoint page.
  3. Hover your mouse above or below an existing web part and you’ll see a line with a circled +, like this:
    Add a web part.
  4. Click + and you’ll see a list of web parts to choose from. To easily find the Calendar Overlay web part, start typing in the Search box and then select Calendar Overlay in the search results.
    Find and add the Calendar Overlay.

The Calendar Overlay web part has now been successfully added to your SharePoint page and is ready to be configured:
The Cloudwell Calendar Overlay in edit mode.

Add the Calendar Overlay to a Teams channel tab

  1. Select a channel in a team where you want to add the Calendar Overlay. In the below picture, we have selected the General channel in the Cloudwell Dev team:
  2. Select + to add a new tab on the channel.
  3. Find the Calendar Overlay app in the list. If needed, you can use the search capability to find the app:
    Add a tab
  4. Select Add to confirm the tab to be selected.
    Add the app as a tab.
  5. Select Save to confirm the tab to be installed on the channel:

The Calendar Overlay app has now been successfully added to your Microsoft Teams team channel as a tab and is ready to be configured:
Cloudwell Calendar Overlay app in Teams

Configure the Calendar Overlay

  1. The Calendar Overlay uses the native settings dialogs in SharePoint and Teams to configure settings for the app.

    To edit the settings in SharePoint, while in edit mode on a page, select the Edit web part icon on the Calendar Overlay web part:
    Edit in SharePoint
    To edit the settings in Teams, select the dropdown of the Calendar Overlay tab you would like to edit and click settings:
    Edit in Teams.

  2. The Settings panel will become visible on the right side of the screen:
    Calendar Overlay settings

Data Source Settings

The Data Source Settings allow a user to define the sources, colors, and order of calendars in view.

Select Calendars From

The Select Calendars From setting allows a user to scope where the SharePoint calendars for configuration are coming from. A user can select the following options: Current Site (default), Current Site Collection, All Sites.

SharePoint Calendars

The Calendar Overlay supports adding SharePoint lists and document libraries as a source. The only requirement is the list/library must have columns that can map to the Title, Start Date, and End Date settings in the configuration dialog.

  1. To add a new calendar or edit an existing calendar source to the Calendar Overlay, select Manage Calendars under the SharePoint Calendars heading.
    Manage SharePoint calendars
  2. Click Add to define a new calendar source, or select a row in the table below and click Edit to modify the settings of an existing calendar source, Delete the calendar source, or the Up and Down arrows to change the order in the legend.
    Manage SharePoint calendars
  3. To add/edit a calendar source fill in the following properties:
  • Display As – This is the title of the calendar source as displayed in the legend.
  • Event Colors – You can set the calendar source font, background, and border colors with the color picker.
  • Site – This is the source site for your list.
  • Calendar List – This is the source for your list.
  • View – The view of items from your source as defined by your SharePoint list/library view.
  • Event Title Column – The display title of your event mapping to a string column from your list/library.
  • Event Start Date Column – The start date of your event mapping to a date column from your list/library.
  • Event End Date Column – The end date of your event mapping to a date column from your list/library.

    Manage a SharePoint calendar

Exchange Calendars

The Calendar Overlay supports adding Exchange Online and on-premises calendars as a source. This allows a user to define any source with an email address associated to it, such as a User, Microsoft 365 Group, Shared Mailbox, or Resource Account.

  1. To add a new calendar or edit an existing calendar source to the Calendar Overlay, select Manage Calendars under the Exchange Calendars heading.
    Manage Exchange calendars
  2. Click Add to define a new calendar source, or select a row in the table below and click Edit to modify the settings of an existing calendar source, Delete the calendar source, or the Up and Down arrows to change the order in the legend.
    Manage Exchange calendar
  3. To add/edit a calendar source fill in the following properties:
  • Email Address – This is the email address associated with the Exchange calendar.
  • Group Calendar – If set to true, the icon in the legend for this calendar displays a group of users.
  • Calendar Name – This is the title of the calendar source as displayed in the legend.
  • Event Colors – You can set the calendar source font, background, and border colors with the color picker.

Add Exchange calendar

Calendar Display Settings

Default View

The Default View setting allows a user to define which view loads by default for all users of the Calendar Overlay. All users can change their view with the view selector, however the default view is always shown when the Calendar Overlay is loaded. The default setting is Month.
Calendar Overlay default view

Available Views

The Available Views setting allows a user to configure which calendar views are available for all users of the Calendar Overlay to select. The default settings are Month, Week, Day, and List. Additionally, you can select Week Summary and Day Summary.
Available calendar views

Display Calendar Legend

The Display Calendar Legend setting allows a user to toggle the visibility of the legend of configured calendar sources displayed above the calendar. The default setting is On.
Calendar legend

Enable Legend Dropdowns

The Enable Legend Dropdowns settings allows a user toggle the visibility of the calendar legend menus for configured calendars. The legend dropdown allows all users of the Calendar Overlay to add new events to the associated calendar (if permissions allow), navigate to the calendar source, and toggle the visibility of the calendar in their view. The default setting is On.
Calendar legend dropdown

Events Per Day

The Events Per Day setting allows a user to define the number of events per day to show on the calendar. Additional events are displayed when clicking on the + more text on the date. The default value is 4 events per day.
Show more events

Calendar Height Mode

The Calendar Height Mode setting allows a user to set the scaling of height for the Calendar Overlay. The following options are:

  • Auto – Auto sets the height based on width of the parent element.
  • Parent (default) – Auto-scales to the height and width of the parent element.
  • Ratio – Allows a user to size based on aspect ratio in relationship to width.
  • Manual – Allows a user to define a height in pixels.

Calendar height mode

Event Display Settings

Display Event Start and End Times

These settings allow users to toggle the visibility of event start and end times on the Calendar Overlay. The default setting is On.
Event Display Settings

Uninstall the Calendar Overlay

  1. Go to your tenant’s SharePoint App Catalog and click the “Apps for SharePoint” link in the quick launch navigation.
  2. Select “Cloudwell Calendar Overlay” in the list of apps and click delete from the menu.
  3. In Microsoft Teams, select Apps in the app bar, then navigate to “Built for organization”, find the Calendar Overlay app, click the ellipsis, and then Delete.

    Delete the Calendar Overlay app from Microsoft Teams.

Limitations and Known Issues

  • Limited support within the SharePoint mobile app for iOS and Android.

You can find a list of frequently asked questions here.

Need additional support?

+1 (703) 215-8230