Here's how to highlight specific dates with custom styles in jQuery UI Datepicker:
Basic Solution
$(function() {
$("#datepicker").datepicker({
beforeShowDay: function(date) {
// Define dates to highlight (format: [Y,M,D])
var highlightDates = [
[2023, 11, 25], // Christmas
[2023, 0, 1], // New Year's Day
[2023, 6, 4] // Independence Day (example)
];
for (var i = 0; i < highlightDates.length; i++) {
if (date.getFullYear() === highlightDates[i][0] &&
date.getMonth() === highlightDates[i][1] &&
date.getDate() === highlightDates[i][2]) {
return [true, 'highlight-date', 'Special Day'];
}
}
return [true, ''];
}
});
});
CSS Styling
.highlight-date a {
background-color: #ff5252 !important;
color: white !important;
border-radius: 50%;
font-weight: bold;
}
.event-date a {
background-color: #2196F3 !important;
}