Old answer:
I found it!
This code does the trick:
function openDialog(pUrl) {
var options = {
title : "Kalender",
width : 600,
height : 400,
url : pUrl
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
$('.ms-acal-month').ready(function () {
setTimeout(function() {
$('a[href*="DispForm.aspx"]').each(function() {
$(this).attr('onclick', 'openDialog("' + $(this).attr('href') + '")');
$(this).attr('href','javascript:void(0)');
});
}, 1000);
});
It is slightly based on a post I found here, but I edited it because in the original post it opened the dialog twice. So instead of doing so, I added a "javascript:void(0)" to the calendar item.
Thanks anyway for the help though!
New answer:
The old answer only showed a modal dialog when there were no more than three items. As soon as you have 4 items or more, you get a link at the bottom of the day saying "1 extra item". When you click on that link, the code no longer works and all events once again open in a new page. To prevent this, I have re-written the code.
This code allows events/calendar items to show in a modal dialog instead of on a new window. Comments are in the code.
// When called, this function opens the dialog.
function openDialog(pUrl) {
var options = {
width : 600,
height : 400,
url : pUrl };
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
// When the class "ms-acal-month" is loaded, add an onclick
// attribute to all the links ending with "DispForm.aspx" so
// that the calendar items will open in a dialog instead of
// on a new page.
$('.ms-acal-month').ready(function () {
setTimeout(function modal() {
$('a[href*="DispForm.aspx"]').each(function() {
$(this).attr('onclick', 'openDialog("' + $(this).attr('href') + '")');
$(this).attr('href','javascript:void(0)');
});
}, 500);
});
// This function adds an onclick attribute to the class "ms-cal-nav"
// (the a tag that shows/hides extra items), code is needed when
// there are more than three calendar items on a day.
$('.ms-acal-month').ready( function() {
setTimeout(function() {
$('a.ms-cal-nav').attr('onclick', 'clickMe()');
}, 500);
});
// This function is called when the onclick attribute has been
// triggered. It needs to add the onclick attribute again,
// since SP automatically removes this attribute as soon as
// the function was triggered.
function clickMe() {
setTimeout(function() {
$('a.ms-cal-nav').attr('onclick', 'clickMe()');
$('a[href*="DispForm.aspx"]').each(function() {
$(this).attr('onclick', 'openDialog("' + $(this).attr('href') + '")');
$(this).attr('href','javascript:void(0)');
});
}, 500);
}
If you put this code in a JS file (example: calendar.js", located in "Style Library/Styles"), then all you need to do is put a script editor web part on the bottom of the page on which you have a calendar, and add the following code:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"> </script>
<script src="~sitecollection/Style%20Library/Scripts/calendar.js" type="text/javascript"></script>
This answer can also be found on my blog.
I hope I was of any help for others who also wanted a solution to this!
