1

I am working on a sharepoint online classic team site. and i have added a Calendar list named Events. but inside the calendar view, when i click on an event, the event's display form will open inside the current page, while i am trying to force the event's display form to open in a new tab.

Here is my calendar view:-

enter image description here

I tried to edit the calendar view page >> I add a script editor web part >> then i added the following JavaScript code inside the script editor, the JavaScript will get all the links which have the listname/display form name inside their href attributes, and add .attr('target', '_blank'); to the link , as follow:-

<script>
function MyFunction() {
$('a[href*="Events/Disp"]').attr('target', '_blank');
}
_spBodyOnLoadFunctionNames.push("MyFunction");

$(document).on('click','a',function(e){

   $('a[href*="Events/Disp"]').attr('target', '_blank');
});


</script>

but this script did not work, where still my events will open inside the current page, and not on a new tab.

Here is a sample of the markup for a single calendar event, which i am trying to modify:-

> <a onclick="EditLink2(this,'WPQ2');return false;"
> href="/Events/DispForm.aspx?ID=1">General Meeting</a>

enter image description here

can anyone advice on this please? Thanks

1

Debug your script with F12, I find the root cause is that the script _spBodyOnLoadFunctionNames.push("MyFunction") is loaded before the events are loaded. So that the script does not work.

And the your script $(document).on() only changes the attribute target without opening the URL. About how to open a link in new tab using jQuery, you can refer to this thread > answer provided by Lafif Astahdziq.

Anyway, you can use the script below in the Script Editor web part to set the attribute target after events are loaded in the page.

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<script>
var pollCount = 0;
$(document).ready(function($){
   checkCalendar($);
});
function checkCalendar($) {
   //stop after 10 seconds
   if (pollCount > 20)
      return;
   //if the calendar hasn't loaded yet, then wait .5 seconds
   if ($('.ms-acal-title a').length < 1) {
      pollCount++;
      setTimeout(function(){checkCalendar($);}, 500);     
   }
   else {
      //the calendar has loaded, so do work
      $('.ms-acal-title a' ).attr('target', '_blank');
    }
}    
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.