How to Embed a Modern SharePoint List Calendar (Month) View Using ShortPoint Code Design Element

This article will demonstrate how to embed a Modern SharePoint List calendar (month) view into your SharePoint page using the Code Design Element. 

TABLE OF CONTENTS

• Prerequisite
• Step-by-step Tutorial
  • Part 1: Create a Calendar View of your SharePoint List
    • Step 1: Create new view
    • Step 2: Copy the URL of your Calendar
    • Step 3: Prepare the embed code of your Modern SharePoint Calendar
  • Part 2: Add the SharePoint Calendar View to your SharePoint Page
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Insert the Code Design Element
    • Step 3: Paste the code snippet
    • Step 4: Save

Prerequisite

• 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 have a SharePoint List with a list of your events and schedule:

NOTEThe solution described in this article will NOT work the same way for classic SharePoint Calendars. If you were to use the classic SharePoint calendar, you would embed the whole calendar page, including the ribbon and side panel menu.

Step-by-step Tutorial

The steps will be divided into two parts. Follow each part carefully to get started:

Part 1: Create a Calendar View of your SharePoint List

Part 1 will demonstrate how to create a calendar view out of your SharePoint List. Make sure that your SharePoint List has a Date and Time column type to proceed:

NOTETo have a Date and Time column type on your SharePoint list, simply click [1] +Add Column, select [2] Date and Time, and press [3] Next.

Step 1: Create new view

Go to the SharePoint List you want to use and click the plus icon:

Add a View name:

Select Calendar:

Click Month as the Default layout:

Then, on the Start date on calendar drop-down, select Start Date:

Make sure there is a checkmark in [1] Make this a public view option and click [2] More Options:

From the  Title of items on calendar drop-down, select [1] Title. Then, click [2] Create:

The newly created calendar view will open immediately. You will also see its name on the list menu bar:

Step 2: Copy the URL of your Calendar

Copy the URL of your newly created SharePoint calendar view. Make sure your URL has the viewid parameter:

Step 3: Prepare the embed code of your Modern SharePoint Calendar

Copy the code snippet below:

<iframe src="https://company.sharepoint.com/Lists/Company%20events/AllItems.aspx?viewid=f0655261%2D0d78%2D4167%2Da00a%2D0735f66dfe55" width="100%" height="720"></iframe>

Modify the code snippet:

• Replace the src value with the modern calendar URL that you obtained in step 1.
• Adjust the height value according to your needs.

NOTEDo not modify the width value as this will cause the code snippet to not work properly.

Make sure to keep the modified code snippet. You will use this in Part 2 of the tutorial.

Part 2: Add the SharePoint Calendar View to your SharePoint Page

Part 2 will demonstrate how to add the calendar view using the Code Design Element.

Step 1: Edit the ShortPoint Web Part

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

Select the ShortPoint tag:

Click the pencil icon:

Step 2: Insert the Code Design Element

Click the plus icon to see the library of Design Elements:

Use the search bar to look for Code and select it:

Step 3: Paste the code snippet

Paste the code snippet you modified in Part 1 in the HTML field:

Once satisfied, click the green checkmark:

Step 4: Save

Click the eye icon to see your page in real-time:

Then, click Save to apply your changes:

NOTEUsing this code snippet, you can even add new events to your calendar directly from your SharePoint page:

Congratulations! You have successfully embedded the SharePoint List calendar into your SharePoint page.

Related articles:

• Introducing ShortPoint Code Design Element
• Example Use Cases for ShortPoint Code Design Element: Part 1
• Example Use Cases for ShortPoint Code Design Element: Part 2
• How to Embed the Microsoft Stream Video into a SharePoint Page
• How to Use Code from Codepen.io in ShortPoint Code Design Element
• How to Execute JavaScript Inside the Code Design Element that Depends on Loading External JavaScript Assets