Adding classes to particular dates in jQuery UI datepicker

Puneet Sharma

2 years ago

Here is a working example of adding classes to particular dates in the jQuery UI date picker plugin. You might need to change dates to get the results like image below

DEMO

See the Pen Untitled by Puneet Sharma (@webdevpuneet) on CodePen.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Datepicker Example</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.available{
  background:red;
}
.booked{
  background:green;
}
.housefull{
  background:blue;
}
</style>
</head>
<body>
  <label for="datepicker">Select a date:</label>
  <input type="text" id="datepicker">

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $(function() {
    var available = ["2023-03-15", "2023-03-23", "2023-03-30"];
    var booked = ["2023-03-16", "2023-03-24", "2023-03-29"];
    var houseFull = ["2023-04-17", "2023-03-25", "2023-03-28"];
    
    $( "#my_date_picker" ).datepicker({
      firstDay: 1,
      showOtherMonths: true,
      
      onSelect: function(dateText, instance) {
        setTimeout(addCustomColumn, 0);
      },
      onChangeMonthYear: function(year, month, instance) {
        setTimeout(addCustomColumn, 0);
      },

      beforeShowDay: function(date) {
        var formattedDate = $.datepicker.formatDate('yy-mm-dd', date);
        if (available.indexOf(formattedDate) !== -1) {
          return [true, 'available'];
        }else if( booked.indexOf(formattedDate) !== -1){
          return [true, 'booked'];
        } else if(houseFull.indexOf(formattedDate) !== -1){
          return [true, 'housefull'];
        }
        return [true, ''];
      }
    });

    function addCustomColumn() {
      // Add a new column to the datepicker table header
      $(".ui-datepicker-calendar thead tr").prepend('<th class="custom-header">02</th>');

      // Add a new column to each row in the datepicker table body
      $(".ui-datepicker-calendar tbody tr").each(function() {
        $(this).prepend('<td class="custom-column"><a>02</a></td>');
      });
    }

    // Call the function after the datepicker is initialized
    addCustomColumn();
});
  </script>
</body>
</html>