2

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... less columns, but data not lined up

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>
  • Well, this code just hides two columns from the calendar table, but the actual events (blue bars) do not live inside the table. The events live inside a div that has class="ms-acal-rootdiv". Because of this, the formatting of the table (that is now missing two columns) is different from the formatting of the events. I quickly had a look how to reformat the events, but it seems like a lot of work to do. I suggest looking for a different way of doing this using JSOM and the SP.UI.ApplicationPages.Calendar.js SharePoint JS library. – Mihail-Florin Popa Dec 17 '15 at 16:42
  • If you know some JavaScript, this article may be a good start to get to what you are trying to do. I have not been able to a solution to exactly what you need and I unfortunately do not have time right now to write the code for you. – Mihail-Florin Popa Dec 17 '15 at 16:44
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...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.