title: Customize specific disabled dates within a range using jQuery UI datepicker
body: <p>I'm using jQuery UI datepicker for a form where users request a tour of the school. There is a date range that the tours are being held, and within that range the site admin may disable certain days that are booked. No problem so far:</p>
  
  <pre><code>/* array of booked dates generated from CMS backend */
  var disabledDates = [
      '2015-05-06',
      '2015-05-08' // examples
  ];
  
  $('[name="date_of_visit"]').datepicker({
      minDate: '4/30/2015', // Range start
      maxDate: '10/1/2015', // Range end
      beforeShowDay: function(date) { // Disable custom dates
          var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
          return [$.inArray(string, disabledDates) == -1];
      }
  });
  </code></pre>
  
  <p>I got the <code>beforeShowDay</code> code from this post: <a href="https://stackoverflow.com/q/15400775/398242">Jquery UI datepicker. Disable array of Dates</a></p>
  
  <p>I know I can add a class to the disabled elements with the second parameter but it adds it to all the disabled dates, including those outside of <code>minDate</code> and <code>maxDate</code>:</p>
  
  <blockquote>
    <p><a href="http://api.jqueryui.com/datepicker/#option-beforeShowDay" rel="nofollow noreferrer">beforeShowDay</a>: A function that takes a date as a parameter and must
    return an array with:</p>
    
    <p>0: true/false indicating whether or not this date is selectable <br>1:
    a CSS class name to add to the date's cell or "" for the default
    presentation <br>2: an optional popup tooltip for this date</p>
    
    <p>The function is called for each day in the datepicker before it is
    displayed.</p>
  </blockquote>
  
  <p>However the client has requested that only the "booked" dates have a visual indication that the date is not available (distinct from the default disabled state). There will not be many, maybe 4 or 5. It makes sense to me.</p>
  
  <p>Is there some way to customize only the dates disabled by the <code>beforeShowDay</code> function in my setup, or another solution to achieve what I'm after? <strong><a href="http://jsfiddle.net/phwjrfdz/" rel="nofollow noreferrer">jsFiddle demo</a></strong></p>