Open Dialog Box When Clicking on Calendar Event

Problem:

I added a Calendar View (week) for a list on a Site Page. When I click an event, it takes me to another page instead of opening a dialog box.

Solution:

<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
setInterval(function () {
$("a[href*='DispForm.aspx']").each(function () {
$(this).attr("onclick", "openDialog('" + $(this).text() + "','" + $(this).attr("href") + "')");
$(this).attr("href", "javascript:void(0)");
$(this).removeAttr("target");
});
}, 900);
});

function openDialog(title, url) {
var options = {
title: "Calendar - " + title,

autoSize:true,
url: url
};
SP.UI.ModalDialog.showModalDialog(options);
}
</script>

Paste that into a Script Editor web part or save it as calendar.js and then call it from a Content Editor web part.

Advertisement