Hacky way to show what resources are fully booked on a single product page using Woocommerce Bookings.

get-resource-availability.js

var $product = $('#product');
var $bookingForm = $product.find('.cart');
var $picker = $bookingForm.find('.picker');
var $resources = $('#resources');

function checkAvailability( el ) {
	var fully_booked_ids = [];
  var jsonArray = el.data( 'fully-booked-days' );

  var booking_date_year = $bookingForm.find('#booking_date_year').val();
	var booking_date_month = $bookingForm.find('#booking_date_month').val();
	var booking_date_day = $bookingForm.find('#booking_date_day').val();

	var booking_date_day = booking_date_day.replace(/^0+/, '');
	var booking_date_month = booking_date_month.replace(/^0+/, '');
	var date = booking_date_year+"-"+booking_date_month+"-"+booking_date_day;

	if (typeof jsonArray[date] !== 'undefined') {
		$.each(jsonArray[date], function(jsonObject){
	    for (var key in jsonObject) {
		    if ($.inArray(key, fully_booked_ids) === -1){
			    fully_booked_ids.push(key);
			  }
			  //console.log(key, jsonObject);
			  $resources.find("[data-id='" + jsonObject + "']").addClass("fully-booked");
			}
	  });
	}
};
if($picker.length != 0) {
	checkAvailability($picker);
}