Dates select from Mysql to work with bootstrap datepicker

i’m trying to hightlight all dates in datepicker from mysql but is not working, i think the problem is with array or i don;t know, the thing is when i write in user_busy_days variable [‘2019-12-01′,’2019-12-02’]; is working, but with the code below is not working. any help appreciated.

PHP:

<?php
    $sql = mysqli_query($con,"SELECT dates FROM mls_cereri GROUP BY dates");
      $Data= Array();
    while ($row = mysqli_fetch_array($sql, MYSQLI_ASSOC)) 
    {
         $Data[] = $row['dates'];
    }
        $event =   json_encode($Data);
      ?>

Javascript:

var user_busy_days =  '<?php echo $event; ?>'; // <- Working example:  ['2019-12-01','2019-12-02']

 $('#to_date').datepicker({
    inline: true,
    sideBySide: true,
    format: "yy-mm-dd",
    orientation: "bottom auto",
    todayHighlight: true,
    autoclose: true,

    beforeShowDay: function (date) {
                calender_date = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+('0'+date.getDate()).slice(-2);
                var search_index = $.inArray(calender_date, user_busy_days);
                if (search_index > -1) {
                    return {classes: 'non-highlighted-cal-dates', tooltip: 'User available on this day.'};
                }else{
                    return {classes: 'highlighted-cal-dates', tooltip: 'User not available on this day.'};
                }
            }
});

Answer

When rendered, this line:

 var user_busy_days = '<?php echo $event; ?>'; 

becomes

var user_busy_days = '["2019-12-01", "2019-12-02"]';

which is wrapped in a string, so the check $.inArray(calender_date, user_busy_days); is checking against the characters in the string rather than the strings in the array.

Remove the ' so user_busy_days becomes an array:

 var user_busy_days = <?php echo $event; ?>; 

---

Extra:

The code (date.getMonth()+1) will also need the 0+slice trick for months 1-9, assuming the php dates output as 2020-01-01 (example only shows 2 digit months)