How can I use Jquery Datepicker to highlight with befereshowday two different kind of special dates?

Question

I mean, I found here a way to disable an array of nationalDays.

I'm trying to make a code to disable the national days and also to highlight some other days (I'm coding a web app and I will pass another array of days) but to let them enabled.

Imagine a calendar where you can see three different day colors. The first one, today's date. The second, greyed disabled national days. And in a third color, different days where something special will happen.

Is this possible.

Also, where can i find the css codes in datepicker ui to change the default date, and the disabled date css properties.

Thanks in advance.

Answer 1

Based on the function from the page you linked to:

$(".selector").datepicker({ beforeShowDay: specialAndNationalDays});

natDays = [
  [1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'],
  [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'],
  [7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'],
  [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']
];
speDays = [
  [1, 10, 'mbd'], // Moms Bday
  [7, 20, 'dbd']  // Dads Bday
];

function nationalDays(date) {
    for (i = 0; i < natDays.length; i++) {
      if (date.getMonth() == natDays[i][0] - 1
          && date.getDate() == natDays[i][1]) {
        return [false, natDays[i][2] + '_day'];
      }
    }
  return [true, ''];
}
function specialAndNationalDays(date) {
    for (i = 0; i < speDays.length; i++) {
      if (date.getMonth() == speDays[i][0] - 1
          && date.getDate() == speDays[i][1]) {
        return [true, speDays[i][2] + '_day']; 
        // first variable in return enables(true)/disables(false) the date
      }
    }
  return nationalDays(date);
}