Removing weekend days from calendar with proper data placement

Question

I am trying to use the script for "Removing weekend days from calendar" as outline in this string.

But, while the two columns are removed from the calendar(s) on the page, the actual data does not line up correctly with the columns. Here is a screen shot of what I'm seeing...

Are there any suggestions on how to tweak the code for proper placement?

 <script type="text/javascript">
$(document).ready(function(){

var oTable = document.getElementsByTagName("table");
if (oTable != null) {

for (i = 0; i < oTable.length; i++)
{
var table = oTable.item(i);
if (table.className == "ms-acal-month")
{
for (var c = 0; c < table.rows.length; c++)
{
if (table.rows[c].cells.length == 8)
{
table.rows[c].cells[0].style.display = "none";
table.rows[c].cells[1].style.display = "none";
table.rows[c].cells[7].style.display = "none";
}
else if (table.rows[c].cells.length == 7)
{
table.rows[c].cells[0].style.display = "none";
table.rows[c].cells[6].style.display = "none";
}
else if (table.rows[c].cells.length == 6)
{
table.rows[c].cells[0].style.display = "none";
table.rows[c].cells[5].style.display = "none";
}
else if (table.rows[c].cells.length == 2)
{
table.rows[c].cells[0].style.display = "none";
table.rows[c].cells[1].style.display = "none";
      }
     }
    }
   }
  } 
});
function month(){

var oTable = document.getElementsByTagName("table");
if (oTable != null) {

for (i = 0; i < oTable.length; i++)
{
var table = oTable.item(i);
if (table.className == "ms-acal-month")
{
for (var c = 0; c < table.rows.length; c++)
{
if (table.rows[c].cells.length == 8)
{
table.rows[c].cells[0].style.display = "none";
table.rows[c].cells[1].style.display = "none";
table.rows[c].cells[7].style.display = "none";
}
else if (table.rows[c].cells.length == 7)
{
table.rows[c].cells[0].style.display = "none";
table.rows[c].cells[6].style.display = "none";
}
else if (table.rows[c].cells.length == 6)
{
table.rows[c].cells[0].style.display = "none";
table.rows[c].cells[5].style.display = "none";
}
else if (table.rows[c].cells.length == 2)
{
table.rows[c].cells[0].style.display = "none";
table.rows[c].cells[1].style.display = "none";
}

     }
    }
   }
  }
 }
 //For week view
 function week(){

var oTable = document.getElementsByTagName("table");
if (oTable != null) {

for (i = 0; i < oTable.length; i++)
{
var table = oTable.item(i);
if (table.className == "ms-acal-detail")
{
for (var c = 0; c < table.rows.length; c++)
{
if (table.rows[c].cells.length == 8)
{
table.rows[c].cells[0].style.display = "none";
table.rows[c].cells[1].style.display = "none";
table.rows[c].cells[7].style.display = "none";
}
else if (table.rows[c].cells.length == 7)
{
table.rows[c].cells[0].style.display = "none";
table.rows[c].cells[6].style.display = "none";
}
else if (table.rows[c].cells.length == 6)
{
table.rows[c].cells[0].style.display = "none";
table.rows[c].cells[5].style.display = "none";
}
else if (table.rows[c].cells.length == 2)
{
table.rows[c].cells[0].style.display = "none";
table.rows[c].cells[1].style.display = "none";
}

     }
    }
   }
  }
 }



$( "#WPQ2_nav_prev_a" ).click(function() {
 month();
})
$( ".ms-picker-table" ).click(function() {
month();
})
$( "#WPQ2_nav_next_a" ).click(function() {
month();
})
setInterval(function () { month()}, -10000);
setInterval(function () { month()}, -10000);
setInterval(function () { week()}, -10000);

 </script>

Answer 1

I would use the same exact code, but use visibility: hidden instead of display: none

table.rows[a].cells[0].style.visibility = "hidden";

display:none will shift the css to remove the white space, but it looks as though the layover thinks the weekends are still there...