2

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>
  • what about client side rendering? – Nk SP Apr 24 '15 at 20:05
  • do you mean using JS Link? – Sol Web Solutions Apr 24 '15 at 22:00
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)");

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.