UPDATE: How to show calendar events in modal dialogs in SharePoint 2013

I recently just noticed that my code for showing events in a calendar in a modal dialog does not always do its job. It appears that when you change to another month and then try to open an event in that month (or in any other month, since it fails the moment you change the month), the event won't open in a modal dialog! This also seemed to be the case when you changed the year.

Since I didn't just want to run the script whenever a user clicked a certain element (like those for the months and for the year), I came up with a different and rather easy fix.
I decided to just run the code everytime the user clicks anywhere inside the #content div. Don't worry, it won't alter any link inside your navigation, only those that have "DispForm.aspx" at the end.

// 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 called, this function makes sure each event in the calendar is
// opened in a modal dialog instead of on a new page.
function clickMe() {
 $('a[href*="DispForm.aspx"]').each(function() {
  $(this).attr("onclick", "openDialog('" + $(this).attr("href") + "')");
  $(this).attr("href","javascript:void(0)");
 });
}

window.onload = function () {
 clickMe();
 // A timeout is required for when the page first loads (if you would not
 // use a timeout, then the script won't always load).
 setTimeout(function() { 
  clickMe();
 }, 500);
 
 // When you click anywhere inside #content, it will run the function
 // "clickMe()" twice, once with and once without a timeout. 
 $("#content").click(function() {
  clickMe();
  setTimeout(function() {
   clickMe();
  }, 500);
 });
};

Please do note that it might be possible that your div has a different ID. I modified my HTML master page and I believe I added the div with #Content myself (it just wraps around the #sideNavBox and #contentBox divs), but if you're using the Seattle HTML master page, then you'll need to replace the code for the #content div (which I commented in the code below) with the code for #sideNavBox and #contentBox.

 //$("#content").click(function() {
 // clickMe();
 // setTimeout(function() {
 //  clickMe();
 // }, 500);
 //});

 $("#sideNavBox").click(function() {
  clickMe();
  setTimeout(function() {
   clickMe();
  }, 500);
 });
 $("#contentBox").click(function() {
  clickMe();
  setTimeout(function() {
   clickMe();
  }, 500);
 });

Or you could just modify your HTML master page as well and place a wrapping div around #sideNavBox and #contentBox.

Do make sure that you put a reference to this script on the page with the calendar. I mentioned this in my previous post but I'll say it again in case this is the first time you read about this.
I saved my code in a file named "calendar.js", under a folder named "Scripts" in the "Style library" directory.
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="/Style%20Library/Scripts/calendar.js" 
type="text/javascript"></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, do not hesitate to ask.

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!