This was a triumph.
I'm making a note here: HUGE SUCCESS.

Search This Blog

Tuesday, November 19, 2013

How to show calendar events in modal dialogs in SharePoint 2013

!!! UPDATE !!!
I noticed that my code won't always work, especially when you change to another month in the calendar. So I've rewritten it, you can find the new and correct code in this post. 
_________________________

I have a calendar on a page. When you make a new event in the calendar, you get to make it in a default SharePoint modal dialog (I enabled this in the advanced settings of the calendar). However, when you open an existing event in the calendar, it goes to a new page and shows that event as if I never even enabled modal dialogs.
This is some unwanted behavior, what I really want is that any event in the calendar is shown in a modal dialog, just like when you make or edit an event.

So, I decided to write some code. I added comments to the code to explain to you what it does and what it's for.
// 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);
}

I saved my code in a file named "calendar.js", under a folder named "Scripts" in the "Style library" directory.
In order for the code to do its work, you'll have to put a reference to it on the page with the calendar. Edit the page with the calendar, and at the bottom of a page, add a new script editor web part. Add the following code to that web part:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript" 
src="~sitecollection/Style%20Library/Scripts/calendar.js"></script>

Now save the page, make sure it is checked in and published, and try it out. If all went well, you'll now be able to open events in a calendar in a modal dialog! ;)

If you have any questions or if you are having problems with the code (not working, errors, unwanted behavior,...) feel free to ask!

3 comments:

  1. Its not working for me..Where do we need to call this function

    ReplyDelete
    Replies
    1. As explained in my post:
      --------
      I saved my code in a file named "calendar.js", under a folder named "Scripts" in the "Style library" directory.
      In order for the code to do its work, you'll have to put a reference to it on the page with the calendar. Edit the page with the calendar, and at the bottom of a page, add a new script editor web part. Add the following code to that web part:...
      --------
      Basically, access your SharePoint site with SharePoint Designer, navigate to the "Style Library" folder, create a new folder in there named "Scripts", and in that folder create a new file (you can create a css file first, then rename it and change the extension to js) named "calendar.js" and paste the code in there. Then you just need to add a reference to that script by adding it in a script editor web part, which you place at the bottom of your page.

      Delete
  2. Hello,

    I tried exactly the same steps

    1. Created new folder in Style library named 'Scripts' and put this JS file
    2. Created one more txt file for javascript and placed in site assests
    3. Put the second file in calendar page below the calendar in Content editor webpart
    4. Saving the page and clicking on Event link in Monthly view

    It did not work for me. Can you let me know if I need to do something here to get this work

    ReplyDelete