Show Work Week only / Disable Weekends in a SharePoint 2013 Calendar

As per default you can only set three views in a calendar:

• Month View
• Week View
• Day View

There isn't an option available to set your work week (except in Regional Settings which is another topic).

So, how can we accomplish this? I searched through blogs an communities an came to following solution.

Set your work week in a Week View

Create a new view and name it "Week - Work Week" (WeekWorkWeek.aspx). Insert a Content Editor Web Part and paste this code into it's source:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">

$().ready(function(){
       var cal = $('.ms-acal-detail');
       // Loop through the Calendar Table and find the relevant columns.
       cal.find('tr').each(function () {
              // If it is the header we will remove the Saturday and Sunday from the TH Section.
              if($(this).hasClass("ms-acal-week-top"))
              {
                     // In the first row we remove the weekdays Saturnday and Sunday.
                     // Located at position 5 Saturday and 6 Sunday.
                     $(this).closest("tr").find("td:eq(" + 6 + ")").remove();
                     $(this).closest("tr").find("td:eq(" + 5 + ")").remove();
              }else
              {
                     // We dont have the headers anymore so we can remove the rest of the cells as well, that we dont have empty columns.
                     $(this).closest("tr").find("td:eq(6)").remove();
                     $(this).closest("tr").find("td:eq(5)").remove();
              }
       });
});</script>

Found here.

With this solution I had some problems; If you are switching the weeks (by click on the arrows) the weekends are back. It works only on page loading. And the events aren't placed exactly on the Weekdays:

As soon as I have found a proper solution for this issue I will update this article.

Set your work week in a Month View

Same procedure as above: Create a new view, name it "Month - Work Week" (MonthWorkWeek.aspx) and insert a Content Editor Web Part. Use following CSS code:

<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(7) {  
        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;  
    }  
</style>

Found here.


I've tested both solutions in a SharePoint 2013 Environment with CU April 2015.