SP2010 color code full calendar day background

Question

I have created a calendar in SP2010 where the majority of events are recurring series. I have incorporated a holiday schedule into this calendar using a calendar overlay. My problem is that most of the recurring series events overlap the holiday schedule and my user community is required to modify the days of those recurring series that fall on the holidays. Rather than have the users modify the schedules I would like to "blackout" the day so they simply can't see the events for those days. I have found that I can set the background color of an entire calendar using this script in a CEWP;

.ms-acal-day4 { BACKGROUND-COLOR: #ff0000 }

However, this sets the background color for day 4 of every week. What I want to do is set the background color for specific days throughout the year. If I can set the background color to "black" for the holidays, my users won't see the events on the calendar.

Any help or suggestions are appreciated.

Thanks,

Answer 1

We can use the code below to achieve it.

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
    //set specific days
    var holidays=["12/31/2017","1/1/2018","1/14/2018","1/17/2018","2/11/2018"];

    setInterval(function (){
        for(var i=0;i<holidays.length;i++){
            var dayrows = $('tr.ms-acal-summary-dayrow td');
            var itemrows = $('tr.ms-acal-summary-itemrow td');      
            $(dayrows).each(function(j) {
                if($(this).attr('date')==holidays[i]){
                    $(this).css("background-color","black");
                    $(itemrows[j]).children().css("background-color","black");
                }           
            });
        } 
    },500);
});
</script>

Answer 2

I only have SharePoint 2013 to test against, but thought I'd add this here in case SharePoint 2010 used the same structure. This also uses JQuery.

Calendar weeks are made up of 2 rows: class .ms-acal-summary-dayrow for the top that contains the day class .ms-acal-summary-itemrow for the rest that contains the events

The td has a property date=m/d/y - you can use that to find your <td> for the holiday, and then find the corresponding <td> in the next row.

I used the following code to make all days before 'today' gray - maybe you could adapt it? I build 2 arrays of objects - one for the day row and one for the item. I find the correct date, change it to gray, and then do the same with the corresponding object in the item array. You'd probably also have to call this when someone changes the month - that doesn't refresh the whole page.

$(document).ready(function() {
    var today = new Date() ;
    today.setHours(0);
    today.setDate(today.getDate() - 1); 
    var dayrows = $('tr.ms-acal-summary-dayrow td');
    var itemrows = $('tr.ms-acal-summary-itemrow td');
    $(dayrows).each(function(i) {
        var thisDate = new Date($(this).attr('date'));
        if(thisDate < today) {
            $(this).addClass('showGray');
            $(itemrows[i]).addClass('showGray');
        }
    });
  });
<style>
td.showGray {
    background-color: lightgray;
}
</style>