Can i force my Calender's events to open in a new tab

Question

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:-

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>

can anyone advice on this please? Thanks

Answer 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>