Friday, April 6, 2012

Open SharePoint Calendar overlay events in modal dialog

           , ,      6 comments   
I have calendar control with calendar overlays in a page to show calendar events to end-user. All calendar overlay events opens in a new window. But my client wanted to open those events in modal dialog, not in new window.

Then I used the below code in my page(where calendar control presents) using content editor webpart.

// 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-rootdiv a').click(function(){EditLink2(this,'WPQ2');return false;});
}


All overlay were opening in modal dialog :) [Just copy and paste the code]

Note: Find your calendar control's 'WPQ#' and replace the 'WPQ2' in bindEventClickHandler() with your 'WPQ#'. For some control the number changes. Ex: If you control with 'WPQ3' then replace 'WPQ2' with 'WPQ3' in bindEventClickHandler(). You can find that number in status bar of your browser on mouse over the month changing arrows.

6 comments:

  1. Julio FigueroaNovember 14, 2012 at 12:34 PM

    Hi there,

    It did not work for me.
    Do I have to add anything else?

    JF

    ReplyDelete
  2. ClemNovember 20, 2012 at 5:05 AM

    This comment has been removed by the author.

    ReplyDelete
  3. SteveDNovember 20, 2012 at 7:54 AM

    It did't work for me either.
    I've made sure that calendar WPQ3 matches one in script but no luck.
    Any idea? Thanks

    ReplyDelete
  4. Hasan ShingietiDecember 18, 2012 at 8:12 AM

    You have to add a reference to jQuery before this script. Put this before the code:

    script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"> script

    NOTE: Put script tags around the code!

    You can also download the jquery file and put it where ever you want, just make sure to update the reference.

    ReplyDelete
  5. Dan KlineOctober 10, 2013 at 11:46 AM

    This doesn't work. First blush looks good, but if you open a link from a view and then return to the calendar and click a link in the main view, the dialog popos up and goes gray and focus is lost. I think you're missing a step to reset events on completion.

    ReplyDelete