Wednesday, December 3, 2014

How to change the opening behavior of Calendar items in a Calendar Overlay view

Today I've had another interesting requirement to change the behavior of a SharePoint 2010 calendar, which was built using the Calendar Overlay view to address the need of multiple departments to be able to view all events in the organization. Each department was set with their own calendar, so the quickest choice was to use the Calendar Overlay view. That is quite limited, by the way, but that's a whole different story. You can't have more than 10 calendars and more than 9 different colors assigned to the calendars. You can, however easily customize the colors to your own choice. The final results looks like that:




Now, the user story is they find it annoying that whenever they click on a calendar item, it always loads in a new tab and when they click the "Close" button on it, it leaves the overlay view on the screen and that makes one additional tab open in their  browser.

No out-of-the-box way to change that unfortunately, but everything's possible with a little JavaScipt / jQuery - that will do the exact trick - it'll make the events load in a pop-up window in the same tab:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"</script><script>
_spBodyOnLoadFunctionNames.push('calendarEventLinkIntercept');

function calendarEventLinkIntercept()
{
if (SP.UI.ApplicationPages.CalendarNotify.$4a)
  {
    var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4a;
    SP.UI.ApplicationPages.CalendarNotify.$4a = function () 
      {
        OldCalendarNotify();
        bindEventClickHandler();
      }
  }
  if (SP.UI.ApplicationPages.CalendarNotify.$4b)
  {
    var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4b;
    SP.UI.ApplicationPages.CalendarNotify.$4b =  function () 
      {
        OldCalendarNotify();
        bindEventClickHandler();

      }  
  }
}

function bindEventClickHandler() {
$('.ms-acal-rootdiv a').click(function(){EditLink2(this,'WPQ2');return false;});
}
</script>

Add that in a Content Editor Web part on your Calendar list overlay page and you're done.
The tricky bit: This only addresses the opening behavior when the user clicks on an item title. If they double click on the calendar field, the event still loads in a new window. I think that's also possible to change, but not worth the effort in researching and developing.

No comments:

Post a Comment