jQuery calender: Highlight date with different color

By | January 8, 2014

Today I have done experiment to highlight specific date with different color in datepicker. Let’s see step by step.

jQuery-datepicker-hightlight-color

CSS: overright css class with differ color. Here I have applied red background color with white font. You can change its with your choice of code.

.ui-highlight .ui-state-default{
background: red !important;
border-color: red !important;
color: white !important;
}

Make a array of dates that you want to highlight.

var dates = [‘2014-01-05′,’2014-01-15′,’2014-01-25’];

Put some logic to match date and apply your css class. Here I have made a custom date in YYYY-MM-DD format as it same as a array value and easy to find out into the array.

beforeShowDay : function(date){
var y = date.getFullYear().toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date.getDate().toString(); // get Day
if(m.length == 1){ m = ‘0’ + m; } // append zero(0) if single digit
if(d.length == 1){ d = ‘0’ + d; } // append zero(0) if single digit
var currDate = y+’-‘+m+’-‘+d;
if(dates.indexOf(currDate) >= 0){
return [true, “ui-highlight”];
}else{
return [true];
}
}

That’s it. You have done. :)

A full example: just copy and paste into your test page and see how it works.

Leave a Reply

Your email address will not be published. Required fields are marked *