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;
}

SharePoint Calendar: Change displayed time range on day/week view of calendar

One of my clients asked me to restrict the time range for  day/week view. They wanted to show only the working hours in views i.e. 9AM to 5PM.

Solution:
I changed the regional settings to specify working hours as 10 AM to 5PM and then I applied the below script.

/* Hiding timings 5pm onwards */
.ms-acal-detail tr:nth-child(37){
    display: none !important;
}
.ms-acal-detail tr:nth-child(38){
    display: none !important;
}
.ms-acal-detail tr:nth-child(39){
    display: none !important;
}
.ms-acal-detail tr:nth-child(40){
    display: none !important;
}
.ms-acal-detail tr:nth-child(41){
    display: none !important;
}
.ms-acal-detail tr:nth-child(42){
    display: none !important;
}

/* changing color of off timing */
.ms-acal-outday{
    background-color:white !important;
}