Calendar Overlays: Keeping events in the same window.

Previously, I shared about how to create a color coded calendar, and then taking that calendar a little further and jazzing it up with some color. One issue that has been identified with this method, and using calendar overlays in general, is the fact that the events open in a whole new window. Not cool.

I’ve toyed around with some custom JavaScript that can fix this, but haven’t found a solution, until now. Actually, until Kevin commented on my post and pointed me over to this MSDN forum thread.

After reading through the thread, I’ve compiled the follow block of code. You can throw this in the same web part that contains your CSS.

NOTE A few people have reported this doesn’t work in SharePoint 2013. I’ll find a solution. ;)



// load our function to the delayed load list
_spBodyOnLoadFunctionNames.push('calendarEventLinkIntercept');

// hook into the existing SharePoint calendar load function.
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();

}
}
// future service pack change may go here!
// if (SP.UI.ApplicationPages.CalendarNotify.???)
}

function bindEventClickHandler() {
$('.ms-acal-mdiv a, .ms-acal-ddiv a, .ms-acal-sdiv a').click(function(){EditLink2(this,'WPQ2');return false;});
$('a.ms-cal-nav').attr("href", "javascript:bindEventClickHandler(); void(0);");
}

NOTE: Update the first line to your jQuery file if you have it somewhere on your network/site already.

Happy SharePointing!

84 thoughts on “Calendar Overlays: Keeping events in the same window.

Add yours

  1. HELP! I’ve had a disaster twice now with working with overlays. I set up the color coding and used the code to disable the hyperlinks and everything was fine. Then I went to work on this problem. The code referencing an external jquery library was causing a warning message about security so I thought that might be why the code I was trying ( A variation of what you have here.) wasn’t working. I found information on how to add the jquery files to site assets to avoid this. To get rid of the error message before I did that I removed the javascript that I’d just added and only that. When I clicked on the OK button my calendar vanished. What has happened is that the default calendar seems to have gone poof while the overlays I added are still there. When I go to the Calendar Overlay Settings it shows Calendar and my overlays but Calendar is in smaller text and can’t be clicked on. The web part I added for color customization seems to have suffered the same fate. Any ideas?

    1. Yikes! Not sure on this one. Try throwing the calendar web part on a new page and add a few overlays and see if it works there, just to rule out a bigger issue with the list. Try removing all of your custom code and css and see what happens, does it all return to normal?

  2. I am assuming that this still doesn’t work in Sharepoint 2013? The really annoying part is that it opens a new tab and when you click on the Close button it returns you to the Calendar…in the same tab, leaving two tabs with the calendar open.

  3. David,
    When I clicked on Download the script it took to a different page. Can you please send me the code for fixing the overlays?

    Thank you.

  4. I downloaded the script… where is it located in the file? Also, am I meant to paste the code into all together? I know nothing when it comes to this stuff so I really need the Where to Paste For Dummies version haha

  5. Hello David,

    i am using SHP 2013 Foundation. I have added you code into Script editor webpart, but it keeps open in new tab. Do you have any suggestions?

    Thank you for you reply.

    Marek

  6. I checked and no errors and when I say new windows I may of miss spoken. I put your script into a web part, if I remove it clicking an event opens a new tab. If I keep you script in the web-part, clicking the event opens the event but is the same window that I was in but not as a pop-up modal box.

    Let me know your thoughts if need be I can take screen shots or video. thanks.

  7. Script is working ok for me. But instead of opening up a modal it opens a new page, better than a new tab, but when I hit close it takes me back to todays date not the month I was on. Is there any way to get a Modal to open on top of everything?

  8. Hi David,
    I got this error: SP.UI.ApplicationPages.CalendarNotify is undefined.
    We use sharepoint 2013 for public website. So I would like to know if your code only worked for Team Site, not for Publishing site.
    Thanks,

  9. Thanks a lot for this solution and your color coding solution. They fixed the problem, but I noticed that this script seems to break after you edit the site in SharePoint Designer.

    After opening the site in SharePoint Designer, creating a workflow, and saving changes, the script no longer works and the items open in new tabs again. I noticed that instead of , the first line of the code changes to . For some reason the “//ajax.googleapis.com” part of your script source gets stripped out.

    Any idea why this is happening or how to fix it?

    This is in SP 2010.

    1. You should be able to append the correct protocol to the start of the URL, like http://ajax… or https://ajax. The correct protocol will be whatever protocol your site is using for users to access it. The lack of the protocol allows the browsers to auto-switch from http to https as needed. Apparently SPD doesn’t like that, big surprise.

      Let me know how it goes.
      David

      1. Hi David. Thanks for the quick reply. After I posted my question, I noticed the same thing was happening not only when I edited the page in SPD, but also when I made changes to the list or the pages in the browser, too. I just added the protocol and it seems to have fixed the problem. Hopefully it’ll stay working. I’ll keep you posted. Thanks again!

Leave a Reply

Powered by WordPress.com.

Up ↑

%d bloggers like this: