Create a custom date picker or calender based on 365 number of characters

Question

I am getting a string value with 365 chars from an API that tells me the reserved, booked, and available dates where:

0 = Available;
1 = Reserved;
2 = Booked;

Now my question is, how can I pass these values to the moment.js date picker and disable the booked or reserved days with a loop or something?

I am using date range picker with momentjs. https://www.daterangepicker.com/#usage I don't know how to use a loop and convert each of these character into a data then disable or enable them on the daterangepicker.

My string value from API looks like this: "11422222224000000000000000000011111114000000000000000000000000000000000000000000000000000000000000000000000000000000000000000111111111111400000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000"

Answer 1

I was able to resolve the problem with this code:

<?php 
$currentYearList = "https://www.booking-manager.com/api/v2/shortAvailability/". date("Y") ."?companyId=5715&yachtId=" . get_field('yacht_api_id', get_the_ID()) . "&format=3"; ?>
<script>
unavailable_dates = [];
var from = new Date(2022, 0, 1); // Start Date
from =  moment(from).format('YYYY-MM-DD[T]HH:mm:ss'); //Formatted with momentjs
var custom_dates = <?php echo $currentYearList; ?>  //Data fetched from api;
var date_array = custom_dates.split('');
// Loop through 365 Days.
for (let i = 0; i <= 365; i++) {
            let date = moment(from);
            date.add(i, 'day');
            if(date_array[i] != 0){
            unavailable_dates.push(moment(date).format('YYYY-MM-DD[T]HH:mm:ss'));
            }
    } </script>

Then I passed the unavailable_dates array to daterangepicker like this:

rangepickerinput.daterangepicker({ 
isInvalidDate: function(date)
{       
  return !!(unavailable_dates.indexOf(date.format('YYYY-MM-DD')) > -1);
}
})