uncaught ReferenceError: tgl is not defined

I dont really know what is causing the error since I'm new to JavaScript. I've referenced the variable in the header with js:

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {          
    selectable: true,
    selectHelper: true,
    select: function date(start, end, alldays){
      $("#BookingModal").modal('toggle');
      var tgl=moment(start).format('DD-MM-YYYY')
    }
  });
  
  calendar.render();
});

And when I want to use the variable in the body of the html, it throws the error:

> uncaught ReferenceError: tgl is not defined

<h1 class="modal-title fs-5" id="exampleModalLabel"> <script type="text/javascript">document.write(tgl)</script></h1>

The modal title you whish to have is dynamic based on the calendar cell that was clicked.

So you have to wait for the user to click on a calendar cell to know what is the startDate provided in this select callback.

The code below will be exectuted on page load while parsing the HTML...
Long before the rest of your code that will execute after DOMContentLoaded has fired.

<script type="text/javascript">document.write(tgl)</script>

The events are firing in this order and that is how tgl should be used in each of them:

1. DOMContentLoaded -- tgl is declared
2. FullCalendar's select -- tgl value is setted
3. show.bs.modal -- tgl value is used

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.addEventListener("DOMContentLoaded", function () {
  // Have the tgl variable at global scope
  let tgl;

  // On modal open, set the modal title
  $("#BookingModal").on("show.bs.modal", function (event) {
    $("#BookingModal").find(".modal-title").text(tgl);
  });

  // FulCalendar
  var calendarEl = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, {
    selectable: true,
    select: function date(start, end, alldays) {
      // Set tgl here
      tgl = moment(start.startStr).format("DD-MM-YYYY");

      // Open modal
      $("#BookingModal").modal("show");
    }
  });

  calendar.render();
});

<!-- language: lang-html -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.0.2/index.global.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

<div id="calendar"></div>

<div class="modal fade" id="BookingModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">This title will be replaced</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        Some modal body here...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
      </div>
    </div>
  </div>
</div>

<!-- end snippet -->

CodePen

Also, notice I used start.startStr to pass to moment.js. You can console log that start object of FullCalendar to understand why.