SharePoint 2010 calendar's "Add" button issues after fixing the scrolling bug

What?

How to fix SharePoint 2010 calendar's "Add" button issues after fixing the scrolling bug

Why?

Every SharePoint designer must have bumped across the scrolling issue with SharePoint 2010 master pages.

Kyle Schaeffer & Greg Galipeau have already written excellent post 1 & excellent post 2 about this issue and how to fix it and so I am not going into details of the issue and how to fix it.

Of course, with any solution that changes the core way a system works, there is bound to be issues. One such issue is with the OOB calendar web part's "Add" button.


How?


Let me explain the issue with "Add" buttons in calendars.

When you hover over a day in the SharePoint calendar the "add new" link comes up. This isn't working "exactly" right in our solution. The reason is, if you scroll down on the page and then hover over a calendar item, the "add new" link shows up in the wrong calendar day. It works perfectly fine if you don't have to scroll down (the issue only happens when you scroll).

Take a look at the screen shot below:

As you can see in the above screenshot, the page has not been scrolled and so the calendar works as expected. I hovered over the cell 7/1T and the "Add" button popped up in the right place.

Now I scrolled down a little bit in the page as shown below:

In the above screenshot, I hovered over the cell 4/28M and the "Add" button popped up in the wrong cell (7/28M). This is a side effect due to fixing the scroll issue.

Greg Galipeau explained a work around for this issue in his post

According to Greg's post, the javascript needs to be saved into the file system (LAYOUTS/1033) which could be quite a limitation for designers. Designers may or may not have access to SharePoint's file system.

So I have decided to save this file in SharePoint as opposed to the physical file system.

Save the below JavaScript into "calendarAddPositionFix.js" and save it into "Style Library/Scripts"

/* ################## Start Calendar Fixes #################### */

function MenuHtc_GetElementPosition(element, relativeToElement)

{

 var result=new Object();

 result.x=0;

 result.y=0;

 result.width=0;

 result.height=0;

 if (element.offsetParent) {

  var parent=element;

  while (parent !=null &&

   parent !=relativeToElement)

  {

   result.x+=parent.offsetLeft;

   result.y+=parent.offsetTop;

   AdjustScrollPosition(parent, relativeToElement, result);

   var parentTagName=parent.tagName.toLowerCase();

   if (parentTagName !="body" &&

    parentTagName !="html" &&

    parent.clientTop !=null &&

    parent.clientLeft !=null &&

    parent !=element) {

    result.x+=parent.clientLeft;

    result.y+=parent.clientTop;

   }

   parent=parent.offsetParent;

  }



        //This is the custom code added to account for scrolling

        //when the code has been customized to not use

        //overflows in the s4-workspace

  result.x -= document.documentElement.scrollLeft;

  result.y -= document.documentElement.scrollTop;

 }

 else if (element.offsetLeft || element.offsetTop) {

  result.x=element.offsetLeft;

  result.y=element.offsetTop;

 }

 else {

  if (element.x) {

   result.x=element.x;

  }

  if (element.y) {

   result.y=element.y;

  }

 }

 if (element.offsetWidth && element.offsetHeight) {

  result.width=element.offsetWidth;

  result.height=element.offsetHeight;

 }

 else if (element.style && element.style.pixelWidth && element.style.pixelHeight) {

  result.width=element.style.pixelWidth;

  result.height=element.style.pixelHeight;

 }

 return result;

}

/* ################## End Calendar Fixes #################### */

Open your master page and locate the below tag:

<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" />

Replace the above tag with the below:

<SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server"/>
<script type="text/javascript" defer="defer" src="/Style%20Library/Scripts/calendarAddPositionFix.js"></script>

Check-In/Publish your master page and the calendars should work fine now.