title: How can we add multiple color for multiple jquery ui datepicker?
body: <p>I have a project in laravel. On one page I have several jQuery ui datepicker see the image below. When page loads I need to get some date from database and mark some color on calendar, based on data. At-present I can mark color only on one datepicker. How can I mark color on multiple datepicker?<a href="https://i.stack.imgur.com/g7CFx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g7CFx.jpg" alt="enter image description here"></a></p>
  
  <p><strong>CalendarController.php</strong></p>
  
  <pre><code>return view('searchResult',['greenDates' =&gt; $available_dates, 'orangeDates' =&gt; $orangeDates, 'redDates' =&gt; $not_available_dates]);
  </code></pre>
  
  <p><strong>searchResult.blade.php</strong></p>
  
  <pre><code>@foreach($cabinSearchResult as $result)
          &lt;div class="form-group row calendar" data-id="{{ $result-&gt;_id }}"&gt;
  
              &lt;div class="col-sm-4"&gt;
                   &lt;input type="text" class="form-control dateFrom" id="dateFrom_{{ $result-&gt;_id }}" name="dateFrom" placeholder="Arrival" readonly&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-4"&gt;
                   &lt;input type="text" class="form-control dateTo" id="dateTo_{{ $result-&gt;_id }}" name="dateTo" placeholder="Departure" readonly&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  @endforeach
  
  
  @push('scripts')
  
      var greenDates      = {!! json_encode($greenDates) !!};
      var orangeDates     = {!! json_encode($orangeDates) !!};
      var redDates        = {!! json_encode($redDates) !!};
      var start_date      = '';
  
      $(".dateFrom").datepicker({
        showAnim: "drop",
        dateFormat: "dd.mm.y",
        changeMonth: true,
        changeYear: true,
        minDate: '+1d',
         yearRange: "0:+2"
      });
  
      $("body").on('mousedown', ".dateFrom", function() {
  
      var dataId       = $(this).parent().parent().data("id");
      var $this        = $(this);
      var returnResult = [];
  
      $this.datepicker("option", "beforeShowDay", function(date) {
         var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
         if( greenDates.indexOf(string) &gt;=0 ) {
             returnResult = [true, "greenDates", "Available"];
         }
  
         if( orangeDates.indexOf(string) &gt;=0 ) {
             returnResult = [true, "orangeDates", "Few are available"];
         }
  
         if( redDates.indexOf(string) &gt;=0 ) {
             returnResult = [true, "redDates", "Not available"];
         }
  
         return returnResult;
      });
  
      $this.datepicker("show");
  
      });
  
  @endpush
  </code></pre>