Bootstrap Date Picker - Does not work as expected until the user interacts with the calendar

Question

Thanks in advance for the help.

I am currently working to adding a bootstrap date picker to my website.

I have added it to the page but I have an issue with what I think is the JavaScript.

When a user clicks on the calendar all of the dates show in green. However it should look like the screenshot below (only selected Saturdays in green) but this only happens after a user clicks a date/interacts with the calendar.

I have added the Javascript code below that specifies which days are selected.

$(document).on('ready', function() {
  // disable dates on calendar      
  $('.datepicker').datepicker({
    autoclose: true,
    disable: [
      false,
      1, 2, 3, 4, 5, 6, [2023, 7, 19],
      [2023, 6, 22]
    ]
  });
});

html,
body {
  min-height: 100vh;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css" integrity="sha512-34s5cpvaNG3BknEWSuOncX28vz97bRI59UnVtEEpFX536A7BtZSJHsDyFoCl8S7Dt2TPzcrCEoHBGeM4SUBDBw==" crossorigin="anonymous"
  referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.0/mdb.min.css" rel="stylesheet"/>

<div id="date-picker-example" class="md-form md-outline input-with-post-icon datepicker" style="max-width: 150px;" aria-haspopup="true" aria-expanded="false" aria-readonly="false" aria-owns="date-picker-example_root">
  <input placeholder="Select date" type="text" id="example" class="form-control picker__input">
  <label for="example" class="active">Available Dates...</label>
  <i class="fas fa-calendar input-prefix active" tabindex="0"></i>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js" integrity="sha512-LsnSViqQyaXpD4mBBdRYeP6sRwJiJveh2ZIbW41EBrNmKxgr/LFZIiWT6yr+nycvhvauz8c2nYMhrP80YhG7Cw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.0/mdb.min.js"></script>

Basically this Javascript only works when a user clicks a date/interacts with the calendar. I want it to be working from launch.

Does anyone have an idea of how to solve this?

Here is the page if that helps: https://www.pelicancentre.org/our-pool/pool-parties/test.php

I have tried adding it as a snippet in this question but i couldn't get it to work.