How can we help you today?

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




  • 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:

SharePoint list

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:

Date and Time column type

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.
Add Column, date and time, next

Step 1: Create new view

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

plus icon

Add a View name:

View name

Select Calendar:


Click Month as the Default layout:


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

Start Date

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

Make this a public view

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

Title, Create

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

Calendar view

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:

copy URL

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

Copy the code snippet below:

<iframe src="" 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:

ShortPoint tag

Click the pencil icon:

pencil icon

Step 2: Insert the Code Design Element

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

plus icon

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:

HTML field

Once satisfied, click the green checkmark:

green checkmark

Step 4: Save

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

eye icon

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:

Add new item

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

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 69 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more