Format List Calendar View Days

Question

We'd like to format the calendar view of a list not off the data entered for each of the days, but off the actual day of the week.

For example:

• Saturday and Sunday boxes would be red
• Monday boxes would be blue
• Tuesday-Thursday boxes would be yellow
• Friday boxes would be green

When adding colors for other days though, the color for Monday seems to appear as the color header for Sunday.

All day cell "header" colors shift left to the day before.

<style>
 .sunday{background-color:red;}
 .monday{background-color:yellow;}
 .friday{background-color:aqua;}
 .saturday{background-color:aqua;}

</style>

<script type="text/javascript" src="/sites/SiteAssets/jquery-latest.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){

 interval = setInterval(ready, 1000);
 });

function ready()
 {
      $sun = $("table.ms-acal-month>tbody tr td:nth-child(1)");
  $mon = $("table.ms-acal-month>tbody tr td:nth-child(2)");
  $fri = $("table.ms-acal-month>tbody tr td:nth-child(6)");
  $sat = $("table.ms-acal-month>tbody tr td:nth-child(7)");

     $sun.each(function(){
       $(this).addClass('sunday');
        $(this).find("div").addClass('sunday');
      });

$mon.each(function(){
       $(this).addClass('monday');
        $(this).find("div").addClass('monday');
      });

$fri.each(function(){
       $(this).addClass('friday');
        $(this).find("div").addClass('friday');
      });

$sat.each(function(){
       $(this).addClass('saturday');
        $(this).find("div").addClass('saturday');
      });


}
 </script>

Answer 1

I had to add the 'ms-acal-summary-itemrow' class to the tr element as shown below:

$sun = $("table.ms-acal-month>tbody tr.ms-acal-summary-itemrow td:nth-child(1)");
$mon = $("table.ms-acal-month>tbody tr.ms-acal-summary-itemrow td:nth-child(2)");
$fri = $("table.ms-acal-month>tbody tr.ms-acal-summary-itemrow td:nth-child(6)");
$sat = $("table.ms-acal-month>tbody tr.ms-acal-summary-itemrow td:nth-child(7)");