SPO 2013 - Open calendar items in a modal dialog

Question

We are using O365/Sharepoint Online 2013.

We are using the Sharepoint Calendar as a lightweight general event reminder. We would like to have items opening in a modal dialog instead of a new page. I have turned on the dialogs in the calendar's advanced settings but it didn't help.

I searched the internet for a few days and came up with different scripts to achieve this. The best sources I have found are these:

• How to open a calendar item in a modal dialog?
• http://social.msdn.microsoft.com/Forums/sharepoint/en-US/87634b39-55c3-477a-a58d-c1469f15a9a1/calendar-overlay-how-to-open-in-modal-mode-instead-of-new-window?forum=sharepointdevelopment
• http://social.technet.microsoft.com/wiki/contents/articles/19185.sharepoint-2013-how-to-open-list-forms-in-dialog-box-instead-of-navigating-to-another-page.aspx

The script we have at the moment:

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"></script>
<script type="text/javascript">

function openDialogBox(Url) 
{    
    var ModalDialogOptions = { url:Url, width: 600, height: 500, showClose: true, allowMaximize: true};    

    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', ModalDialogOptions);
}


$('.ms-acal-month').ready(function () { 

setTimeout(function() {

$('a[href*="DispForm.aspx"]').each(function() {
$(this).attr('onclick', 'openDialogBox("' +  $(this).attr('href') + '")');
//$(this).attr('onclick', ' ');
//alert($(this).attr('href'));
});

$('a[href*="DispForm.aspx"]').each(function() {
$(this).attr('href','javascript:openDialogBox("' +  $(this).attr('href') + '")');
});

}, 3000);
});

</script>

This script is working fine for the monthly view when clicking an event in the current month but if we user the arrows to show the next month, events are not opening in a modal dialog anymore.

What's wrong? How to fix it? I'm very grateful for any help regarding this issue! :-)

Answer 1

You could use this script to show all pages (display, edit, add) of the calender in a dialog. This also works with the buttons in the ribbon.

// wait until "core.js" is loaded, to override it's function
SP.SOD.executeOrDelayUntilScriptLoaded(function ()
{
    var _useDialogsForFormsWithCtx = window.UseDialogsForFormsWithCtx;
    window.UseDialogsForFormsWithCtx = function (ctx)
    {
        // is context from a calendar list?
        if (ctx != null && ctx.listTemplate == "106")
            return true;
        else
            return _useDialogsForFormsWithCtx(ctx);
    }
}, "core.js");

You're replacing the function UseDialogsForFormsWithCtx that is reponsible to evaluate whether a dialog is needed or not. If the passed in rendering context is from a calendar, then make sure a dialog is displayed. Otherwise, we let the original function decide what to do.

Answer 2

I'm using Sharepoint Online and I use calendar overlays and the accepted answer did not work for me.

But I found this link, and the code there did work: https://social.technet.microsoft.com/Forums/office/en-US/fe2aa278-7122-46eb-9a29-1112edaa3866/forum-faqopen-calendar-overlay-item-in-a-modal-dialog?forum=sharepointgeneral

Here's the code from the link:

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

There's also no "Edit Page" button in the default calendar.aspx page on Sharepoint Online. A simple way to open the page in edit mode is to simply add ?ToolPaneView=2 at the end of the URL. e.g.

mysite.sharepoint.com/Lists/Calendar/calendar.aspx?ToolPaneView=2

Answer 3

I've modified your script to work for all all months.

<script type="text/javascript">
$(document).ready(function () {
    setInterval(function () {
        $("a[href*='DispForm.aspx']").each(function () {
            $(this).attr("onclick", "openDialogBox('"+$(this).attr("href")+"')");
            $(this).attr("href", "#");
            $(this).removeAttr("target");
        });
    }, 900);
});

function openDialogBox(Url) 
{
var ModalDialogOptions = { url:Url, width: 600, height: 500, showClose: true, allowMaximize: true};    

SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', ModalDialogOptions);

}</script>