Tuesday, July 14, 2015

SharePoint Calendar : Hide Columns in Month/Week View

One of my clients had a requirement where they want to hide Saturday & Sunday from Monthly and weekly view.

The problem is resolved in two steps:

1. Setting Monday as the first day of the week by regional settings. 

2. Specifying the CSS below:

/* Hiding Saturday & Sunday from Monthly Calendar View */
.ms-acal-month tr th:nth-child(1){
    display:none;
}
.ms-acal-month tr th:nth-child(7){
    display: none;
}
.ms-acal-month tr th:nth-child(8){
    display: none;
}

.ms-acal-summary-dayrow th:nth-child(8), .ms-acal-summary-dayrow td:nth-child(8){
    display: none;
}
.ms-acal-summary-dayrow th:nth-child(7), .ms-acal-summary-dayrow td:nth-child(7){
    display: none;
}

.ms-acal-summary-itemrow th:nth-child(7), .ms-acal-summary-itemrow td:nth-child(7){
    display: none;
}
.ms-acal-summary-itemrow th:nth-child(6), .ms-acal-summary-itemrow td:nth-child(6){
    display: none;
}
/* Hide columns in week view */
.ms-acal-detail tr td:nth-child(8){
    background-color:white;
    color:white;
    border-color:white;
}

.ms-acal-detail tr td:nth-child(7){
    background-color:white;
    color:white;
    border-color:white;
}

.ms-acal-week-top td div{
    border-color:white;
}

1 comment: