This topic is locked

Changing background of some days on monthly Calendar

5/16/2014 12:57:00 PM
Calendar Template tips and tricks
admin

Let's say you need a specific day to stand out like someone's birthday or a national holiday. Here is how it looks in Calendar application.


This code needs to be added to JavascriptOnLoad event of calmonthly view List page.

  1. Highlighting the single date

// single date

// year, month, day, month is zero-based

var d = new Date(2014,5,12); // June 12, 2014

var day = 'add'+d.getDate();

$("#"+day).css('background','#FFC1C1');


2. Highlighting weekends. This examples highlights Fridays and Sundays (weekly dayoffs in Brunei)

// Fridays and Sundays

var y=$("#yselect").val();

var m = $("#mselect").val();

var d1 = new Date(y, m-1, 0);

var getTot = d1.getDate(); //Get total days in a month
for(var i=1;i<=getTot;i++){ //looping through days in month

var newDate = new Date(y,m-1,i)

if(newDate.getDay()==0 || newDate.getDay()==5){ //if Sunday or Fridat

var day = 'add'+i;

$("#"+day).css('background','#C1FFC1');

}

}