Try ShortPoint nowThe SharePoint Web Part Design Element allows you to embed SharePoint web parts into ShortPoint Design Elements, but it can also be used to add a calendar to your page. This article will demonstrate how you can do that.
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
Step-by-step Tutorial
The steps have been divided into two parts. Follow the detailed steps to complete the tutorial.
Part 1: Adding the Calendar
This part will demonstrate how to add the calendar using the SharePoint web part Design Element:
Step 1: Edit the ShortPoint web part
Go to the SharePoint page you want to use and click Edit:
Click the cross icon to close the Toolbox:
Select the ShortPoint tag:
Click the edit properties icon:
Step 2: Insert the SharePoint Web Part Design Element
Click the plus icon to open the Library of Design Elements:
Use the search bar to look for SharePoint Web Part and select it:
Step 3: Copy the URL
Copy the URL below:
<Site URL>/Lists/Events/calendar.aspx
Step 4: Paste the URL
Paste the URL in the field provided:
Then, replace <Site URL> with your site’s URL:
Finally, click the green check mark to apply your changes:
You may now proceed to Part 2.
Part 2: Hide Calendar Header
When you add the calendar, you will notice there are headers and other elements you may not want to display. If you want to hide these elements, follow the guide below:
Step 1: Switch to Grid Mode
Click the Switch to Grid Mode icon:
Step 2: Copy the code
Copy the code below:
[code code_html="%3C!--%20Add%20your%20HTML%20code%20here%20--%3E%20%0A" code_css="%2F*%20Add%20your%20CSS%20code%20here%20*%2F%20%0A" code_js="var%20myInterval%20%3D%20setInterval(function()%20%7B%20%0A%20%20var%20iframeElements%20%3D%20document.querySelectorAll('iframe%5Bid%5E%3D%22sharepoint-webpart-shortpoint%22%5D')%3B%0A%20%20if%20(iframeElements.length%20%3E%200)%20%7B%0A%20%20%20%20iframeElements.forEach(elem%20%3D%3E%20%7B%0A%20%20%20%20%20%20clearInterval(myInterval)%3B%0A%0A%20%20%20%20%20%20elem.addEventListener(%22load%22%2C%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20var%20iframeDoc%20%3D%20elem.contentDocument%20%7C%7C%20elem.contentWindow.document%3B%0A%20%20%20%20%20%20%20%20iframeDoc.querySelector(%22head%22).insertAdjacentHTML(%0A%20%20%20%20%20%20%20%20%20%20%22beforeend%22%2C%0A%20%20%20%20%20%20%20%20%20%20%60%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%23sideNavBox%2C%20%23suiteBarDelta%2C%20%23s4-titlerow%2C%20.ms-core-sideNavBox-removeLeftMargin%20%7B%20display%3A%20none%20!important%3B%20%7D%20%23contentBox%20%7Bmargin-left%3A%2010px%3B%20margin-right%3A%2010px%3B%20%7D%3C%2Fstyle%3E%60%20%20%20%20%0A%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%0A%20%20%7D%0A%7D%2C%201000)" code="%7B%22html%22%3A%22%3C!--%20Add%20your%20HTML%20code%20here%20--%3E%20%5Cn%22%2C%22css%22%3A%22%2F*%20Add%20your%20CSS%20code%20here%20*%2F%20%5Cn%22%2C%22javascript%22%3A%22var%20myInterval%20%3D%20setInterval(function()%20%7B%20%5Cn%20%20var%20iframeElements%20%3D%20document.querySelectorAll('iframe%5Bid%5E%3D%5C%22sharepoint-webpart-shortpoint%5C%22%5D')%3B%5Cn%20%20if%20(iframeElements.length%20%3E%200)%20%7B%5Cn%20%20%20%20iframeElements.forEach(elem%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20clearInterval(myInterval)%3B%5Cn%5Cn%20%20%20%20%20%20elem.addEventListener(%5C%22load%5C%22%2C%20()%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20var%20iframeDoc%20%3D%20elem.contentDocument%20%7C%7C%20elem.contentWindow.document%3B%5Cn%20%20%20%20%20%20%20%20iframeDoc.querySelector(%5C%22head%5C%22).insertAdjacentHTML(%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22beforeend%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%60%3Cstyle%20type%3D%5C%22text%2Fcss%5C%22%3E%20%23sideNavBox%2C%20%23suiteBarDelta%2C%20%23s4-titlerow%2C%20.ms-core-sideNavBox-removeLeftMargin%20%7B%20display%3A%20none%20!important%3B%20%7D%20%23contentBox%20%7Bmargin-left%3A%2010px%3B%20margin-right%3A%2010px%3B%20%7D%3C%2Fstyle%3E%60%20%20%20%20%5Cn%20%20%20%20%20%20%20%20)%3B%5Cn%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%7D)%5Cn%20%20%7D%5Cn%7D%2C%201000)%22%2C%22showErrors%22%3Afalse%7D" padding-top="6px" padding-right="6px" padding-bottom="6px" padding-left="6px" /]Step 3: Paste the code
Right-click and select Paste Code After SharePoint Web Part:
Step 4: Disable Sandbox Mode
Hover over Code and select the cogwheel icon:
Make sure [1] Sandbox Mode is disabled and click [2] Update:
Step 5: Save
Click the eye icon to see your page in real-time:
Click Save to apply all your changes:
That’s it! You can now add a calendar using the SharePoint Web Part Design Element.
Related articles:
