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.


2 Answers 2


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">
    //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) {

enter image description here

  • Thank you LZ-WX, I've got this working as initially written and I'm sure we can sort out the bug. I've added the additional holidays for the year however, only the holidays for the first month are blacked out. When I arrow forward thru the months, those holidays are not blacked out and when I arrow back to the first month, the script doesn't reload. I have tried positioning the CEWP both above and below the calendar but get the same result.
    – user62801
    Jan 3, 2018 at 17:45
  • I modify the code above, check it again.
    – LZ_MSFT
    Jan 4, 2018 at 1:49
  • Thank you, LZ-WX. It works perfectly. Happy New Year!!
    – user62801
    Jan 4, 2018 at 16:54
  • 1
    Happy New Year! You can mark the reply as answer, thanks.
    – LZ_MSFT
    Jan 5, 2018 at 1:18

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.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) {
td.showGray {
    background-color: lightgray;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.