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

1 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.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: gray;

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.

  • This is very close to what I need - the only problem is that it adds a gray background to today's date as well as past days. I've tried 'today-1', but haven't been able to tweak the code to re-define the showGray class successfully.
    – Quasimodo
    Sep 11, 2017 at 21:21
  • I noticed that - I've updated my answer to do the today-1 - that way it stops on yesterday. Right after the var today, set the hours to 0, then subtract one from the date. Sep 11, 2017 at 21:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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