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

I'm trying this to at least get the first column/Sunday color coded, but nothing is happening:

<script type="text/javascript" src="/sites/ProjectSite/SiteAssets/jquery-latest.min.js">
<script type="text/javascript">
 $(function() {
        var $t;

        var interval = setInterval(function() {
            $t = $("table.ms-acal-month>tbody tr td:nth-child(1)");

            $t.each(function(){
              $(this).style("background-color", "red");
            });
        }, 1000);
    });
</script>

Any ideas on how to even start with this?

• Edited by bubberz1 Friday, April 24, 2015 8:03 PM more info and what I've tried so far
• Moved by Rebecca TuMicrosoft contingent staff, Moderator Monday, April 27, 2015 6:12 AM dev issue

Hi,

According to your description, my understanding is that you want to set different color for the box based on the weekday number in the calendar.

I suggest you can use Jquery to add different CSS class to achieve it. You can firstly add CSS class in the calendar view page, and then use the Jquery like below to show the color:

CSS:

.sunday{background-color:red;}

Jquery:

$(document).ready(function(){

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

function ready()
{
     $t = $("table.ms-acal-month>tbody tr td:nth-child(1)");

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

}

Thanks

Best Regards

Thank you...that is now working!

• Edited by bubberz1 Monday, April 27, 2015 7:04 PM

When adding colors for other days though, the color for Monday seems to appear as the color header for Sunday (yellow header on red day).

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>

• Edited by bubberz1 Monday, April 27, 2015 8:51 PM image upload

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)");