Can i force my Calender's events to open in a new tab
-
25-01-2021 - |
Вопрос
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
Решение
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>