2

I need to hide weekend in calendar SharePoint 2013. And I can hide the columns Saturday and Sunday. But I have some problems in my calendar view.

  1. The button "Add" disappears in the columns Friday. I cannot add a meeting on the calendar view.

enter image description here

  1. All button "Add" and "Meeting" display in the wrong place. They do not adapt the new view (from Monday to Friday). They always display as old view (from Monday to Sunday) enter image description here

Refer to this article Can i edit the default calendar list code for hiding weekend my code as below:

    $(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[7].style.display = "none";
//reduce week cell 
$(".ms-acal-summary-dayrow > th").css("width","1%");
$(".ms-acal-time").css("width","50px");
}
else if (table.rows[c].cells.length == 7)
{
table.rows[c].cells[6].style.display = "none";
$(".ms-acal-summary-dayrow > th").css("width","1%");
$(".ms-acal-time").css("width","auto");
   }
else if (table.rows[c].cells.length == 6)
{  
table.rows[c].cells[5].style.display = "none";
$(".ms-acal-summary-dayrow > th").css("width","1%");
$(".ms-acal-time").css("width","auto"); 
}
     }
    }
   }
  } 
});

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[6].style.display = "none";
table.rows[c].cells[7].style.display = "none";

$(".ms-acal-summary-dayrow > th").css("width","1%");
$(".ms-acal-time").css("width","auto");
}
else if (table.rows[c].cells.length == 7)
{
table.rows[c].cells[5].style.display = "none";
table.rows[c].cells[6].style.display = "none";

$(".ms-acal-summary-dayrow > th").css("width","1%");
$(".ms-acal-time").css("width","auto");
}
else if (table.rows[c].cells.length == 6)
{
table.rows[c].cells[4].style.display = "none";
table.rows[c].cells[5].style.display = "none";

$(".ms-acal-summary-dayrow > th").css("width","1%");
$(".ms-acal-time").css("width","auto");
}


     }
    }
   }
  }
 }
 //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[6].style.display = "none";
table.rows[c].cells[7].style.display = "none";
$(".ms-acal-time").css("width","auto");
$("div.ms-acal-vlink").css("width","205px");

}
else if (table.rows[c].cells.length == 7)
{
table.rows[c].cells[5].style.display = "none";
table.rows[c].cells[6].style.display = "none";
$(".ms-acal-time").css("width","auto");
$("div.ms-acal-vlink").css("width","205px");
}
else if (table.rows[c].cells.length == 6)
{
table.rows[c].cells[4].style.display = "none";
table.rows[c].cells[5].style.display = "none";
$(".ms-acal-time").css("width","auto");
$("div.ms-acal-vlink").css("width","205px");
}


     }
    }
   }
  }
 }



$( "#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);
  • Let me know which answer suits the best / helps you solving the problem, will release bounty on your call. – Arsalan Adam Khatri Aug 3 '15 at 16:22
  • @ArsalanAdamKhatri hi, unfortunately, these 2 answers do not reply my question :( – AnnaCICI Aug 4 '15 at 9:56
  • Let's wait for other answers than :) – Arsalan Adam Khatri Aug 4 '15 at 11:09
  • Does the new answer help? Let me know.. – Arsalan Adam Khatri Aug 6 '15 at 15:53
3

You can use the below script, it will keep the Add functionality intact.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><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.visibility = "hidden";
    table.rows[c].cells[1].style.visibility = "hidden";
    table.rows[c].cells[7].style.visibility = "hidden";
    }
    else if (table.rows[c].cells.length == 7)
    {
    table.rows[c].cells[0].style.visibility = "hidden";
    table.rows[c].cells[6].style.visibility = "hidden";
    }
    else if (table.rows[c].cells.length == 6)
    {
    table.rows[c].cells[0].style.visibility = "hidden";
    table.rows[c].cells[5].style.visibility = "hidden";
    }
    else if (table.rows[c].cells.length == 2)
    {
    table.rows[c].cells[0].style.visibility = "hidden";
    table.rows[c].cells[1].style.visibility = "hidden";
          }
         }
        }
       }
      } 
    });
    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.visibility = "hidden";
    table.rows[c].cells[1].style.visibility = "hidden";
    table.rows[c].cells[7].style.visibility = "hidden";
    }
    else if (table.rows[c].cells.length == 7)
    {
    table.rows[c].cells[0].style.visibility = "hidden";
    table.rows[c].cells[6].style.visibility = "hidden";
    }
    else if (table.rows[c].cells.length == 6)
    {
    table.rows[c].cells[0].style.visibility = "hidden";
    table.rows[c].cells[5].style.visibility = "hidden";
    }
    else if (table.rows[c].cells.length == 2)
    {
    table.rows[c].cells[0].style.visibility = "hidden";
    table.rows[c].cells[1].style.visibility = "hidden";
    }

         }
        }
       }
      }
     }
     //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.visibility = "hidden";
    table.rows[c].cells[1].style.visibility = "hidden";
    table.rows[c].cells[7].style.visibility = "hidden";
    }
    else if (table.rows[c].cells.length == 7)
    {
    table.rows[c].cells[0].style.visibility = "hidden";
    table.rows[c].cells[6].style.visibility = "hidden";
    }
    else if (table.rows[c].cells.length == 6)
    {
    table.rows[c].cells[0].style.visibility = "hidden";
    table.rows[c].cells[5].style.visibility = "hidden";
    }
    else if (table.rows[c].cells.length == 2)
    {
    table.rows[c].cells[0].style.visibility = "hidden";
    table.rows[c].cells[1].style.visibility = "hidden";
    }

         }
        }
       }
      }
     }



    $( "#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>
  • 1
    Hi, your code hides the title "Monday" and "Sunday". But these 2 columns always display on the page (always 7 columns). Is it possible hide weekend column and Add adapts the new view (From Monday to Friday) – AnnaCICI Aug 4 '15 at 9:52
3
+25

Add a CEWP to your page, under the calendar, and link it to the following script:

<script type="text/javascript">
//
// Calendar - Weekdays only
//
// Regional settings: week starts on Monday.
// Change the CalendarWidth value to adjust the width of the calendar.
// 742 pixels is the default SharePoint value.
// Set the value to zero for automatic layout.
// 

var CalendarWidth = 742;

var theCalTable = document.getElementById("CalViewTable1");
if (theCalTable != null)
{
theCalTable.rows[0].cells[0].getElementsByTagName("IMG")[0].width = CalendarWidth;

// Number of columns to remove
var ColCount = 0;
switch (theCalTable.parentNode.id)
{
case "MontlyViewDefault_CalendarView":
  ColCount = 2;
break;
case "WeeklyViewDefault_CalendarView":
  ColCount = 6;
break;
}

var theCalendar = theCalTable.rows[2].cells[0].firstChild ;
if (theCalendar.nodeType!=1) {theCalendar = GetFirstChildElement(theCalTable.rows[2].cells[0]);} // for Firefox

for (var i=0; i
<theCalendar.rows.length; i++)
{
var imax=0;
do {
var lastchild = theCalendar.rows[i].lastChild ;
if (lastchild.nodeType!=1) {theCalendar.rows[i].removeChild(lastchild); continue;} // for Firefox
if ((lastchild.className == "ms-cal-week") || (lastchild.className == "ms-cal-weekB")) {break;}
imax = imax + lastchild.colSpan;
if (imax <= ColCount) {
theCalendar.rows[i].removeChild(lastchild);
}
} while (imax < ColCount)
}
}
</script>
<style type="text/css">
.ms-cal-weekname {width:20%;}
</style>

The script scrolls through the calendar and removes the columns for Saturday and Sunday. It works for both the month view and week view.

  • Hi, your code is for SharePoint 2013 calendar? It does not work in my site..........And class name .ms-cal-weekname, ms-cal-week don't existe in SharePoint 2013 calendar. – AnnaCICI Aug 21 '15 at 9:06
0

The biggest obstacle in doing what you want is that SharePoint 2013 dynamically builds the calendar table on the fly - and it's not a static table like in older versions. Not all of the cells have a class assigned to them, so you end up having to manipulate cells based on their position within the table, or maybe even their position on the page.

See if this works for you - add the following CSS to a CEWP (for a single calendar page) or to your custom CSS file on the site collection.

<style type="text/css">
/* HIDE DAY NAMES */
.ms-acal-month > tbody > tr > th:first-child {display:none}
.ms-acal-month > tbody > tr > th:nth-child(2) {display:none}
.ms-acal-month > tbody > tr > th:last-child {display:none}

/* HIDE DAY DATES */
.ms-acal-summary-dayrow > th  {display:none}
.ms-acal-summary-dayrow > td:nth-child(2) {display:none}
.ms-acal-summary-dayrow > td:last-child {display:none}

/* HIDE DAY EVENTS */
.ms-acal-summary-itemrow > td:first-child {display:none}
.ms-acal-summary-itemrow > td:last-child {display:none}
</style>

It won't work if you have any weekend events, and it will also disable the ADD link for the calendar cells (events have to be added from the ribbon or in a different view). The solution uses CSS selectors that aren't supported in older versions of IE, so it won't work in IE 7, 8, or 9.

Other than those gotchas, it might do what you want. Try it and see.

SPONLINE: If you have SharePoint Online, you can change which weekdays are being displayed in the site options. 2013 Enterprise doesn't have that option, unfortunately.

  • Hi, it does not work, all buttons "Add" hide. And the view from Tuesday to Saturday – AnnaCICI Jul 31 '15 at 11:57
  • @MKQian - yes, it hides the Add links. If it's one day off, you need to change the cell position in the CSS. Change those nth-child(2) elements to nth-child(1) or first-child and see what that does. – Omegacron Jul 31 '15 at 13:38
  • Hi, thank you very much. But I need the button Add...... – AnnaCICI Jul 31 '15 at 14:24
  • @MKQian - ah ok. Unfortunately, I think anything that alters the calendar will kill those links. They're generated by script and rely on the other layers for positioning. I'll keep looking though. – Omegacron Jul 31 '15 at 14:31
0

This worked for me.

<style type="text/css">
    table.ms-acal-month > tbody > tr > th:nth-of-type(1) {  
        display: none !important;  
    }
    table.ms-acal-month > tbody > tr > th:nth-of-type(2) {  
        display: none !important;  
    }
    table.ms-acal-month > tbody > tr > th:nth-of-type(8) {  
        display: none !important;  
    }
    table.ms-acal-month > tbody > tr > td:nth-of-type(6) {  
        display: none !important;  
    }  

    table.ms-acal-month > tbody > tr > td:nth-of-type(7) {  
        display: none !important;  
    }  
    .ms-acal-item {
        width: 19.8% !important;
    }
</style>

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.