With ShortPoint Code Design Element you can copy the embed codes from the other sites to inject HTML, CSS or JavaScript to your pages.

In this article we will demonstrate how to embed a Modern SharePoint List calendar (month) view to a modern page designed with ShortPoint.

Here is how our final result will look like: 

This solution is possible when using the ShortPoint Code Design Element. Please follow the steps below.

TABLE OF CONTENTS

• This article is for you if
• Prerequisite: Create a Modern SharePoint list calendar view
• Step 1: Prepare the embed code of your Modern SharePoint Calendar
  • 1.1. Copy the link to the Modern Calendar
  • 1.2. Update the iframe code snippet
• Step 2: Add the Modern SharePoint Calendar to your page
  • 2.1. Insert the Code Design Element
  • 2.2. Update the Code with the iframe code snippet
• Result

This article is for you if

• You are using Modern SharePoint experience on SharePoint 2019 or Office 365 environment.
• You have ShortPoint installed on your SharePoint site(s).
• You are a ShortPoint user with an active license.
• Your ShortPoint SPFx version is 6.9.35.x or higher (the Code Design Element is available since 6.9.35.x. version). 

Note: To learn how to use the Code, check this article: Introducing Code Design Element.

Prerequisite: Create a Modern SharePoint list calendar view

Important: the solution described in this article will NOT work the same way with the classic SharePoint Calendar. By using the classic calendar link, you will embed the whole calendar page, including the ribbon and side panel menu, and not only the events view.

To use this solution, you need to create a calendar view for the Modern SharePoint list. 

Note: Any existing SharePoint modern list can become a calendar, if you have date columns (column type: Date and time) in this list: for the event start and end time. Just like this: 

To create a calendar view for the SharePoint list, first open it from your Site Contents. 

On the list menu bar click All Items (1) and then select Create new view option (2):

In the open modal window with the view settings do the following:

1. Give your view a name.

2. Select the Calendar in the Show as setting.

3. Click the arrow button to expand the dropdown options to define the Start and End date and for each event in your calendar.

4. In our example, we select the Start time column for the Start date on calendar. The End time column will respectively define the End date on calendar option.

Note: You will only see the date columns that exist in the list, others will be omitted. That is why it is important to define the events time in the columns of Date and time type.

5. Make sure your view is public by putting a checkmark in the Visibility option.

6. Click to expand More options.

7. From the dropdown options select the column that you want to have visible as Title of items on calendar.

8. Save your view by clicking the Create button.

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

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

1.1. Copy the link to the Modern Calendar

Navigate to the SharePoint list, and open its calendar view. 

Copy the link from the browser address field. Your URL will look similar to this:

1.2. Update the iframe code snippet

Here is the code snippet that you will need to paste in the Code Design Element in step 2.2:

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

Modify the snippet:

• Replace the src value with the modern calendar URL that you obtained in step 1.1.
• Adjust the height value to your needs.
• Make sure the width value is set to 100%, and do NOT change it.

After the snippet is updated, copy it to the clipboard and proceed to the next step.

Step 2: Add the Modern SharePoint Calendar to your page

2.1. Insert the Code Design Element

The Code Design Element can be easily added to your pages using ShortPoint Page Builder.

You can start with adding a ShortPoint web part to your page by clicking the big blue Insert button and selecting ShortPoint from the list of the web parts:

Then, delete the default Info Design Element (1) and click the blue Insert button to open the ShortPoint Page Builder (2):

Select the Code Design Element from the grid:  

2.2. Update the Code with the iframe code snippet

Paste your iframe code snippet obtained in the step 1.2 to the HTML field of Code Design Element:

Note: If you have the Preview option enabled, you will immediately see the calendar in the preview window, just like on the screenshot above. If the calendar is not showing up, double-check that you pasted the code snippet correctly, and that you are using the correct calendar view URL.

Click Insert, and save the page:

Result

That's it. This is how the final result may look like on your page:

Bonus:

Now you will be able to add the new events items to the list directly from the SharePoint page, where you have this calendar view embedded. 

Simply click the New button, add the event details and save it. 

Cool, isn't it? Happy embedding!

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