How to highlight specific dates with custom styles in jQuery UI Datepicker

Question

Can you tell me How to highlight specific dates with custom styles in jQuery UI Datepicker?

Answer 1

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;

}