Blog
Select Page

Adding classes to particular dates in jQuery UI datepicker

UI Components

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

jquery UI datepicker
jquery UI datepicker

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>