Comment ouvrir un élément de calendrier dans une boîte de dialogue modale?

Question

Quand j'ajoute un nouveau rendez-vous au calendrier, par exemple "rendez-vous avec dentiste", puis je reçois une boîte de dialogue modale dans laquelle je remplisse tous les détails.C'est bon.Le rendez-vous est alors visible dans le calendrier.

Cependant, lorsque je clique sur le rendez-vous, au lieu de l'ouvrir dans une boîte de dialogue modale, il s'ouvre simplement dans une nouvelle page.

Comment puis-je configurer le calendrier afin qu'il ouvre l'élément de rendez-vous / calendrier dans une boîte de dialogue modale?
J'ai déjà défini l'option pour les dialogues modales sur Oui dans les paramètres avancés du calendrier, mais cela ne semble que travailler lorsque je prends un nouveau rendez-vous.Je veux vraiment pouvoir afficher des rendez-vous dans une boîte de dialogue modale.

Answer 1

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!

Answer 2

add a content editor webpart to the page, copy past code into it:

// load our function to the delayed load list
_spBodyOnLoadFunctionNames.push('calendarEventLinkIntercept');


 // hook into the existing SharePoint calendar load function.
 function calendarEventLinkIntercept()
 {
  if (SP.UI.ApplicationPages.CalendarNotify.$4a)
   {
   var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4a;
   SP.UI.ApplicationPages.CalendarNotify.$4a = function () 
   {
   OldCalendarNotify();
   bindEventClickHandler();
   }
   }
  if (SP.UI.ApplicationPages.CalendarNotify.$4b)
   {
   var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4b;
   SP.UI.ApplicationPages.CalendarNotify.$4b = function () 
   {
   OldCalendarNotify();
   bindEventClickHandler();


   } 
  }
 // future service pack change may go here!
 // if (SP.UI.ApplicationPages.CalendarNotify.???)
 }


 function bindEventClickHandler() {
  $('.ms-acal-rootdiv a').click(function(){EditLink2(this,'WPQ2');return false;});
 }

now it will display the items within a modal dialog rath than a new page!

if you have many calendars over many pages/ sites than you need to add code to feature, when you activate feature it needs to be scoped to web and it will add code to that page that the feature is activated on resulting in the same output.....so where ever you have a calandar than you want to display items in modal you just activate feature ;)

code was takem from:

http://mahedevelopment.blogspot.co.uk/2012/04/open-sharepoint-calendar-overlay-events.html

Answer 3

The code works, however if you are using overlays, the newpage still opens (empty) in addition to the dialog also opening.

A solution is to add $(this).removeAttr("target"); to the setTimeout function after $(this).attr('href','javascript:void(0)');

Answer 4

I was messing about with this today and used a different approach (no jQuery required).

I wanted the dialog to open straight into edit mode, as well as refresh the view once the item had been edited and the dialog closed. Rather than attach an eventhandler to the click events, I overwrote the EditLink2 function that normally opens the calendar events. Tested only with SP2013.

Here's the script that can be used

    <script language="javascript">

//saving a reference of the existing function
var EditLink2_Old = EditLink2;

//Overwriting the existing EditLink2 function
EditLink2 = function(el, ctx){

    //check our context is a calendar
    var calContainer = SP.UI.ApplicationPages.CalendarInstanceRepository.lookupInstance(ctx);
    if(calContainer && typeof(calContainer.refreshItems)=="function"){

        //I wanted to go directly to the edit form instead of the view form
        var url = el.href.replace("DispForm", "EditForm");

        var options = {url: url,
                        title:"Edit Event",
                        dialogReturnValueCallback: function(res, args){
                            //if the item was saved
                            if(res==1){
                                    calContainer.refreshItems();
                            }
                        }   
                    };

        //show the edit dialog
        SP.SOD.execute("sp.ui.dialog.js", "SP.UI.ModalDialog.showModalDialog", options);
    }else{
        //Business as usual
        EditLink2_Old(el, ctx);
    }
    return false;
}

</script>

Answer 5

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.

Reference click here

Answer 6

Thank You Magali!

jQuery ready could not fire in time, also timeout in 500ms is not applicable if You have many calendar overlays. I used hook from Munir Husseini's blog: https://mhusseini.wordpress.com/2012/05/18/handle-clicks-on-calendar-items-in-sharepoint-2010-with-javascript/

and modified code from first post. It runs multiple times but handles all overlays and does not depend on timeouts:

"use strict";

if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function () { };

// modify Calendar markup to open items in dialog
function setCalendarItemsToOpenInDialog() {
    try {
            var time = new Date();
            console.log(time.getSeconds() + ":" + time.getMilliseconds() + " Modifying Calendar Links..");

            jQuery('a[href*="DispForm.aspx"]').each(function () {
                jQuery(this).attr('onclick', 'openDialog("' + jQuery(this).attr('href') + '")');
                jQuery(this).attr('href', 'javascript:void(0)');
                jQuery(this).removeAttr("target");
            });

    } catch (e) {
        console.log("Exception in setCalendarItemsToOpenInDialog: " + e.name + ", " + e.message);
    }
}

function myCalendarHook() {
    try {
        //  save the original onItemsSucceed function
        var _onItemsSucceed = SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed;

        // override a function that is called whenever calendar items are loaded (onItemsSucceed)
        SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed = function($p0, $p1) {
            // call the original onItemsSucceed to make sure that all calendar functionality is as it used to be
            _onItemsSucceed.call(this, $p0, $p1);

            // modify Calendar links
            setCalendarItemsToOpenInDialog();

            // For more than 3 items per day there is 'Show n more items' link.
            // This link rewrites all modified links when clicked, so we need to wait a little and call our function again:
            jQuery('a.ms-cal-nav').on('click', function() {
                setTimeout(function() {
                    setCalendarItemsToOpenInDialog();
                }, 500);
            });
        };
    } catch (e) {
        console.log("Exception in myCalendarHook: " + e.name + ", " + e.message);
    }
}

// When called, this function opens the dialog.
function openDialog(pUrl) {
    var options = {
        autoSize: true,
        url: pUrl
    };
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}

ExecuteOrDelayUntilScriptLoaded(function () {
    myCalendarHook();
}, "SP.UI.ApplicationPages.Calendar.js");

Answer 7

Add this script in a script editor webpart on your Calendar view .aspx page:

 <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);
}
$(document).ready(function() {
$('#contentBox').on("click", 'a[href*="DispForm.aspx"]', function(e) {
    e.preventDefault();
    openDialogBox($(this).attr("href"));
    return false;
});
});
</script>