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

  2. Ok this is now just weird. I will send you the HTML but noticed a few things that might help. I am now not getting any errors when adding the calendar script under IE8 document mode, change it IE9 document mode and I get the Object doesn’t support property or method ‘SPServices’ that’s referencing the slider. If i remove the calendar script, the slider runs fine, no SPServices error for the announcement slider on either Document mode IE8 or IE9.

    After all this the calendar script does work, its opening up my calendar overlay in modal but its stuffing up my announcement slider :/

    Seems as though it doesn’t like this line from my announcement slider
    var heightTemp = 0;

    Like

    Reply

  3. Hi David, the SPServices js file is there as it runs the announcement slider and works fine. As soon as I add the calendar script then this error pops up and then stops displaying the slider. Leaves me to believe it causes some kind of conflict between the two

    Like

    Reply

  4. Hi David, curious as to whether this script can affect others that are on the same site? Reason being is that even though this script does work its affecting some other scripts on my main site. To further explain, I’ve added the script on the Calendar list page as a CEWP and its all good. On my main site, im using the calendar as a web part so want to be able to utilise this script here also but have a few other modifications utilising java. The one that has stopped working is my announcement slide show modification (http://sympmarc.com/2013/07/19/spservices-stories-14-create-a-slide-show-in-sharepoint-2010-using-an-announcements-list-and-spservices)

    There’s obviously some kind of conflict, any ideas as to where to look for it and possibly how to resolve it?

    Cheers
    Sanchez

    Like

    Reply

      1. If it cannot find SPServices, then it sounds like the SPServices JS file isn’t being loaded correctly. View the page source (right click > View Source) and search the page for your SPServices JS file, is it still there? Is it near the JS for this post? If you want, email me your HTML and I’ll take a look, david.lozzi at slalom dot com.
        Thanks,
        David

        Like

        Reply

  5. Hi, this is great. However, I just wondered whether you’d had any luck with the Day and Week views yet and my calendar needs to default to Day view

    Like

    Reply

  8. Hi, thank you for this. However it did not work for me. I inserted it into the calendar.aspx, and replaced the location of the jquery file to that of my own. However, items continue to load in a new tab. I’m running SharePoint 2010. Any help would be greatly appreciated. Thank you.

    Like

    Reply

      1. No errors, but only this:
        SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.

        Thanks,
        Phil

        Like

        Reply

      2. I’m not familiar with JavaScript. Here’s the calendar.aspx code, copied from SharePoint Designer. I downloaded your script instead of copying/pasting, and I inserted the code just below the webpart tag. Thanks for your help:

        –

        // 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();
        }
        }
        }

        function bindEventClickHandler() {
        $(‘.ms-acal-mdiv a’).click(function(){EditLink2(this,’WPQ2′);return false;});
        $(‘.ms-acal-sdiv a’).click(function(){EditLink2(this,’WPQ2′);return false;});
        $(‘a.ms-cal-nav’).attr(“href”, “javascript:bindEventClickHandler(); void(0);”);
        }

        Admissions Interviews Calendar
        Default

        true
        2
        Normal

        true
        true
        true
        true
        true
        true
        true
        /administrative/admissions/Lists/AdmissionsInterviewsCalendar

        Modeless
        Default

        Cannot import this Web Part.

        false
        00000000-0000-0000-0000-000000000000
        g_0b2a345b_9a23_497b_a6af_16988af5e74e
        00000000-0000-0000-0000-000000000000
        <View Name=”{0B2A345B-9A23-497B-A6AF-16988AF5E74E}” DefaultView=”TRUE” MobileView=”TRUE” MobileDefaultView=”TRUE” Type=”CALENDAR” TabularView=”FALSE” Scope=”Recursive” RecurrenceRowset=”TRUE” DisplayName=”Calendar” Url=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/calendar.aspx” Level=”1″ BaseViewID=”2″ ContentTypeID=”0x” MobileUrl=”_layouts/mobile/viewdaily.aspx” ImageUrl=”/_layouts/images/events.png”><ViewFields><FieldRef Name=”EventDate”/><FieldRef Name=”EndDate”/><FieldRef Name=”Title”/><FieldRef Name=”fRecurrence” Explicit=”TRUE”/></ViewFields><CalendarViewStyles>&lt;CalendarViewStyle Title='Day' Type='day' Template='CalendarViewdayChrome' Sequence='1' Default='TRUE' /&gt;&lt;CalendarViewStyle Title='Week' Type='week' Template='CalendarViewweekChrome' Sequence='2' Default='FALSE' /&gt;&lt;CalendarViewStyle Title='Month' Type='month' Template='CalendarViewmonthChrome' Sequence='3' Default='FALSE' /&gt;</CalendarViewStyles><Query><Where><And><DateRangesOverlap><FieldRef Name=”EventDate”/><FieldRef Name=”EndDate”/><FieldRef Name=”RecurrenceID”/><Value Type=”DateTime”><Month/></Value></DateRangesOverlap><IsNull><FieldRef Name=”Category”/></IsNull></And></Where></Query><Aggregations Value=”Off”/><RowLimit>0</RowLimit><Mobile MobileItemLimit=”3″/><Toolbar Type=”Standard”/><CalendarSettings><AggregationCalendars><AggregationCalendar Id=”{87b5911d-8411-48f8-9b49-4eb729ed8dbe}” Type=”SharePoint” Name=”Other (Default) Calendar” Description=”” Color=”9″ AlwaysShow=”False” CalendarUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/Other Events.aspx”><Settings WebUrl=”https://sharepoint.thehill.org/administrative/admissions” ListId=”{47312f5c-0949-4db7-857b-3ce23e4ef567}” ViewId=”{eb28be18-1354-4789-8a2b-18b5e2d47c9d}” ListFormUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/DispForm.aspx”/></AggregationCalendar><AggregationCalendar Id=”{f1a639c0-da58-464e-9660-2673a1ed7d71}” Type=”SharePoint” Name=”Meeting Calendar” Description=”” Color=”5″ AlwaysShow=”False” CalendarUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/Meeting.aspx”><Settings WebUrl=”https://sharepoint.thehill.org/administrative/admissions” ListId=”{47312f5c-0949-4db7-857b-3ce23e4ef567}” ViewId=”{7f46506c-20bd-4db2-a23b-8fe47a389109}” ListFormUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/DispForm.aspx”/></AggregationCalendar><AggregationCalendar Id=”{11b23423-ee2b-4475-aa7f-4824ca035d7a}” Type=”SharePoint” Name=”Off-Campus Interview Calendar” Description=”” Color=”2″ AlwaysShow=”False” CalendarUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/OffCampus Interview.aspx”><Settings WebUrl=”https://sharepoint.thehill.org/administrative/admissions” ListId=”{47312f5c-0949-4db7-857b-3ce23e4ef567}” ViewId=”{a3dd61cf-d387-47d9-8b6e-be02a38c0cb8}” ListFormUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/DispForm.aspx”/></AggregationCalendar><AggregationCalendar Id=”{2a4ae41a-44a3-455e-8565-b014880e7a22}” Type=”SharePoint” Name=”Phone Interview Calendar” Description=”” Color=”6″ AlwaysShow=”False” CalendarUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/Phone Interview.aspx”><Settings WebUrl=”https://sharepoint.thehill.org/administrative/admissions” ListId=”{47312f5c-0949-4db7-857b-3ce23e4ef567}” ViewId=”{6ebd0a90-a2a0-4f73-b96b-6c66846d3d95}” ListFormUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/DispForm.aspx”/></AggregationCalendar><AggregationCalendar Id=”{0a4eabfc-2074-4592-ab5d-ae7119999b5f}” Type=”SharePoint” Name=”Skype Interview Calendar” Description=”” Color=”4″ AlwaysShow=”False” CalendarUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/Skype Interview.aspx”><Settings WebUrl=”https://sharepoint.thehill.org/administrative/admissions” ListId=”{47312f5c-0949-4db7-857b-3ce23e4ef567}” ViewId=”{b7bcc10a-ca8e-41cb-beab-8e9dd0ca9437}” ListFormUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/DispForm.aspx”/></AggregationCalendar><AggregationCalendar Id=”{af56f3b3-54e8-4060-a1ee-c7bed628c46c}” Type=”SharePoint” Name=”Tour and Chat Calendar” Description=”” Color=”3″ AlwaysShow=”False” CalendarUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/Tour and Chat.aspx”><Settings WebUrl=”https://sharepoint.thehill.org/administrative/admissions” ListId=”{47312f5c-0949-4db7-857b-3ce23e4ef567}” ViewId=”{e7b6b80a-730f-4813-9475-3dc57d1c96f2}” ListFormUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/DispForm.aspx”/></AggregationCalendar><AggregationCalendar Id=”{ae4bf888-0480-4437-a533-d3002ce5fb43}” Type=”SharePoint” Name=”Travel Calendar” Description=”” Color=”7″ AlwaysShow=”False” CalendarUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/Travel.aspx”><Settings WebUrl=”https://sharepoint.thehill.org/administrative/admissions” ListId=”{47312f5c-0949-4db7-857b-3ce23e4ef567}” ViewId=”{b05a2535-e1ea-452f-88e9-2de6990c1d1d}” ListFormUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/DispForm.aspx”/></AggregationCalendar></AggregationCalendars></CalendarSettings><ViewHeader/><ViewBody/><ViewFooter/><ViewEmpty/><ParameterBindings><ParameterBinding Name=”NoAnnouncements” Location=”Resource(wss,noXinviewofY_LIST)”/><ParameterBinding Name=”NoAnnouncementsHowTo” Location=”Resource(wss,noXinviewofY_DEFAULT)”/></ParameterBindings><ViewData><FieldRef Name=”Title” Type=”CalendarMonthTitle”/><FieldRef Name=”Title” Type=”CalendarWeekTitle”/><FieldRef Name=”Location” Type=”CalendarWeekLocation”/><FieldRef Name=”Title” Type=”CalendarDayTitle”/><FieldRef Name=”Location” Type=”CalendarDayLocation”/></ViewData></View>
        {47312F5C-0949-4DB7-857B-3CE23E4EF567}
        47312f5c-0949-4db7-857b-3ce23e4ef567
        PAGE_DEFAULTVIEW
        27799553
        Html Recursive RecurrenceRowset Calendar FilesOnly Mobile DefaultMobile
        0x

        .ms-bodyareaframe {
        padding: 0px;
        }

        Like

        Reply

      4. Thanks again for all your help via email in helping me learn a little more about JavaScript and the HTML Forms web part. For all who may not know, like myself, add an HTML Forms web part to the page, edit the web part, and use the “source editor…” button to paste the script.

        Lastly, it appears that only all-day appointments open within the current tab when viewing the calendar in day or week view. I have to be the one whose users just so happened to request their calendar be set to default in day view! Any help is greatly appreciated.

        Like

        Reply

        2. Hi Phil,

          Sorry for the delay, but it’s been fixed, should work on week and day views. New code in post above, specifically line 33. Let me know how it goes!

          Regards,
          David

          Like

          Reply

  11. I tried dropping this into a Script Editor WebPart and also an HTML Forms Webpart but after saving all AJAX stops working on the page. I used the script from the text download. Not sure what I am doing wrong.

    Like

    Reply

  12. Thanks so much for this post, David. I have been using some similar code that I found on the internet to stop my overlay calendar items from opening in new tabs.

    Just recently I hit a snag which occurred when a particular day had too many items to show in month view. The “1 more item” link was failing to expand and show all items. Instead, I got a message to say “Internet Explorer cannot display the webpage”.

    My knowledge of Javascript is limited, and my jscript knowledge is non-existent, but the code I had been using referred only to “.ms-acal-rootdiv” in the bindEventClickHandler() funtion, whereas your function has 3 elements to it. It seems it may be the modification of the “a.ms-cal-nav” href attribute that has fixed my problem. I’m using your code in a Content Editor web part and my multi-event days are now expanding and collapsing when I click the links.

    Thanks again,

    Julian.

    Like

    Reply

  13. Brilliant Post, thank you very much. However I have noticed a bug,
    I think you intended to put the code Avikal supplied, however you have just duplicated

    $(‘.ms-acal-mdiv a’).click(function(){EditLink2(this,’WPQ2′);return false;});

    I think line 33 should read: $(‘.ms-acal-mdiv a’).attr(‘onclick’,”).unbind(‘click’);

    Like

    Reply

  14. Hi David.. I have similar problem as Jimmy, actually, the script works perfect for all the other items, but not for the native items (items created for the same overlay on which the other overlays are created) because the default modal popup works for native items so when u click on such item, it opens a modal popup and over it again opens another modal popup. First the default one and the second is due the script.
    So for this I have updated the script a bit. Have placed:

    $(‘.ms-acal-mdiv a’).attr(‘onclick’,”).unbind(‘click’);

    Before this line:

    $(‘.ms-acal-mdiv a’).click(function(){EditLink2(this,’WPQ2′);return false;});

    So it will unbind first all the onclick attributes and then will bind with required one, so that only one onclick will function.

    Thanks,
    Avikal

    Like

    Reply

      1. Would this be in the Calendar.aspx page? Also, I tried a HTML and content editor web part but it did not work. I uploaded a jquery file to a docoument library I created called Scripts and pasted the code below after tag.

        // 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’).click(function(){EditLink2(this,’WPQ2′);return false;});
        $(‘.ms-acal-sdiv a’).click(function(){EditLink2(this,’WPQ2′);return false;});
        $(‘a.ms-cal-nav’).attr(“href”, “javascript:bindEventClickHandler(); void(0);”);
        }

        Like

        Reply

      2. Sorry it did not paste correctly. This is after the

        // 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’).click(function(){EditLink2(this,’WPQ2′);return false;});
        $(‘.ms-acal-sdiv a’).click(function(){EditLink2(this,’WPQ2′);return false;});
        $(‘a.ms-cal-nav’).attr(“href”, “javascript:bindEventClickHandler(); void(0);”);
        }

        Like

        Reply

        1. Hi Christy,

          Did you copy and paste the script from the post above? If you did, download the script file instead, links above and below the code. I see some invalid characters in your code, not sure if that just happened or if it exists in your original:
          (‘calendarEventLinkIntercept’)
          should be
          (‘calendarEventLinkIntercept’)
          the apostrophes get converted.
          HTH

          Like

          Reply

        2. Looks like WordPress comments converts the apostrophes too. So, try the script from the file. If that doesn’t work, email me your script and I can test on my end, david.lozzi at slalom.com.

          Like

          Reply

  17. Hi David,

    For some reason, the script it not working. I’ve checked the jquery source and it’s not blocked by our firewall so unsure what’s going on. Is it possible to send you the script to see if it works on your end?

    Like

    Reply

    2. Copying the code form wordpress does some weird stuff. Specifically, the quotes and apostrophes are incorrect. Copied as ” should be “, ‘calendarEventLinkIntercept’ should be ‘calendarEventLinkIntercept’. I emailed you your updated code. Let me know how it goes.

      I’ll update my post to use a text file instead of embedding the code in the page.

      Like

      Reply

  18. Hi David

    I tried using your code in my calendar inside Content Editor webpart but its not working.
    Acctually i dont have access to any of the master page files on the server i am having admin access to the site and all that i can do is to write any script and try to resolve this issue by stoping it to open in new window when i am editing the event in calendar.

    David can u help he out how to add this code in the page, I need to resolve it ASAP.

    Like

    Reply

    1. Can you try a HTML Forms web part instead? I find these work better. Also, can you email me your entire script, and I’ll give it a whirl on my side, david.lozzi at slalom.com. Thanks

      Like

      Reply

  19. David, there is a bug with this solution, and I was wondering if you could help me out. I’m using this code. I have a SharePoint calendar, and using it to force a calendar overlay event to open in a modal dialog. Basically, it forces them to open in a modal dialog via this code:

    $(‘.ms-acal-ddiv a’).click(function(){EditLink2(this,’WPQ2′);return false;});

    The problem is that there are already “native” events on the calendar which open with this code, and what is happening is that when you click on it, the events open TWICE with a modal dialog, thus rendering the page unusable.

    I’m not savvy with writing jquery or javascript. How can I write the javascript to look for that code, and prevent it from running if the link already executes with that?

    Thanks for the help in advance.

    Like

    Reply

    2. Jimmy, try the new script file I included above in the post. Copying the script from the page carries over invalid characters which may be conflicting in the browser. LMK

      Like

      Reply

Leave a Reply

Blog at WordPress.com.

Up ↑