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.