0

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:

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

  • So this script is working for the first month view , and if you change the selected month , the view again changes and the script is not working right? – Unnie Sep 11 '14 at 8:07
  • Here you are changing the 'href' property of the items once per page, when the calendar is loaded. Now when you click the arrow , the content of the calendar will change and the new items will have default value (ie url of DispForm.aspx) instead of your javascript method in the 'href' property. So try binding your javascript method to the items on the arrow click event as well. – Unnie Sep 11 '14 at 8:12
  • @Unnie: Yep that's right, the current month is working but if I select next month with the arrow button the script does not work anymore. :/ I'm a real newbie with JS so could you maybe show/correct what is wrong with my script and how to fix it? I understand if it's too much trouble, so no worries if that's the case. :) – Tenttu Sep 11 '14 at 10:26
  • You should write the code to set href value to your javascript function in the arrow click event as well – Unnie Sep 11 '14 at 10:29
4

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.

  • Thank you so, so much! This works like a charm! I wish all the good in the world to you! :-) – Tenttu Sep 11 '14 at 11:07
  • Great solution! – Vadim Gremyachev Sep 11 '14 at 11:10
1

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
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.