Gray Out Past Days in Sharepoint 2013 Calendar

Question

Anyone have .css or code to gray out past days in a Sharepoint 2013 calendar?

Answer 1

Are you just looking for the background to be a different color? Here's what I pieced together in Javascript to do that, maybe you can use something similar for what you need. I added a content editor webpart to the calendar view page, referenced JQuery (we keep it in a local document library on the root site), and add this:

 $(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');
        }
    });
  });
 </script>

<style>
td.showGray {
    background-color: gray;
}
</style>

The standard column has rows for the date displayed, then the larger piece where the events go. The first one has an attribute of 'date', so you can use that to test if it's less than 'today'. I'm actually surprised it worked without messing around with asynchronized calls, but this worked for me on my test calendar.