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

About SharePoint, Javascript, PowerShell, and other technical stuff

Monday, July 10, 2017

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="" type="text/javascript"></script>
<script type="text/javascript">

       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.
                     // 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();
                     // We dont have the headers anymore so we can remove the rest of the cells as well, that we dont have empty columns.

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"> > tbody > tr > th:nth-of-type(1) {  
        display: none !important;  
  > tbody > tr > th:nth-of-type(7) {  
        display: none !important;  
  > tbody > tr > th:nth-of-type(8) {  
        display: none !important;  
  > tbody > tr > td:nth-of-type(6) {  
        display: none !important;  
  > tbody > tr > td:nth-of-type(7) {  
        display: none !important;  

Found here.

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

No comments:

Post a Comment