Dynamic Bootstrap-date-picker-sandbox highlight specific date

Currently in a Calendar i am setting background color on static date. In my for loop i am getting array:

// BookeData loop 
@if(!empty($BookeData))
        @foreach($BookeData as $key => $value)
            // getting single venue booked date 
            // Flag : 1 - for 1st half, 2 - for 2nd half and 3 - for full day 
        @endforeach
@endif

On below script i want to set it dynamically , on a booked date and $value->session == 1 then apply gradient css red and green..if session value 2 vice versa css apply..if 3 apply full colour css.

My Script which is working on static date is

<script type="text/javascript">
var booked_date = ["27-11-2017","27-11-2017"]; 
$("#datepicker").datepicker({
 format: "dd/mm/yyyy",
 autoclose: true,

    beforeShowDay: function(date){
    var d = date;
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1; //Months are zero based
    var curr_year = d.getFullYear();
    var formattedDate = curr_date + "-" + curr_month + "-" + curr_year
    if ($.inArray(formattedDate, booked_date) != -1){
       return {
          classes: 'activeClass'
       };
     }
  return;
}
});

Active class css

.activeClass{
  background: -webkit-linear-gradient(red, yellow); 
  background: -o-linear-gradient(red, yellow); 
  background: -moz-linear-gradient(red, yellow);  
  background: linear-gradient(red, yellow);  

}

How can i do this dynamically on my array.!! Thanks in advance.

via Chebli Mohamed