How can we help you today?

Known Issue: SharePoint Events Are Shifted When Pasted into Complex ShortPoint Layouts (Classic Experience)

This article is for you if:

  • You use Office 365 (SharePoint Online) or SharePoint 2019 On-Premise environment.
  • You use Classic SharePoint Experience.
  • You have ShortPoint SPFx app installed on your SharePoint sites.
  • You use SharePoint Calendar Web Part inside complex layouts.


The events from a SharePoint Calendar WebPart appear shifted inside the complex ShortPoint layouts (for example, ShortPoint Tabs). They are not taking the correct places, and instead are shifted to the right, like shown below:

Resizing the browser window or switching between the months in the calendar helps to resolve this issue, but it returns after a page refresh. 

The solution in this article will make sure to trigger a resize event on the Calendar to fix this issue.


Sometimes when adding SharePoint Calendar WebPart into complex layouts, the WebPart might be shifted a bit when it's being rendered into the page. 


To make the SharePoint Calendar events render correctly inside the complex layout we will need to add ShortPoint Code Design Element with custom JavaScript inside it. 

It will make sure to trigger a resize event on the Calendar to fix this shifting issue, and let it fix itself.

Step 1: Add Code Design Element to your page

Edit your page. 

Outside the ShortPoint complex Layout design element you are using to display SharePoint Calendar, insert the ShortPoint Code design element from the Page Builder:

ShortPoint Code design element was introduced in ShortPoint SPFx version.
Make sure, you have it or more recent version to use this solution.
You can always check the latest public ShortPoint version on the ShortPoint Roadmap page.

Step 2: Add custom JavaScript

Copy the following custom JavaScript code:

var $ = shortpoint.$;
$('[data-toggle="tab"]').on('', function (e) {
setTimeout(function() {
}, 500)

Paste it to the JavaScript field in the Settings tab of Code design element:

Step 3: Update the Code element

Click Insert to add the Code design element to your page.

Save/publish your page.

That's it. 

Now the SharePoint Calendar events in the complex layout will render correctly, you will not see them shifted on your 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 27 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