diff --git a/application/views/appointments/book.php b/application/views/appointments/book.php
index c8a78cbcce..3ed90b5008 100755
--- a/application/views/appointments/book.php
+++ b/application/views/appointments/book.php
@@ -459,7 +459,7 @@ class="<?= $require_phone_number === '1' ? 'required' : '' ?> form-control"/>
 <script src="<?= asset_url('assets/ext/datejs/date.min.js') ?>"></script>
 <script src="<?= asset_url('assets/ext/moment/moment.min.js') ?>"></script>
 <script src="<?= asset_url('assets/ext/moment/moment-timezone-with-data.min.js') ?>"></script>
-<script src="<?= asset_url('assets/js/frontend_book_api.js') ?>"></script>
+<script src="assets/js/frontend_book_api.js"></script>
 <script src="<?= asset_url('assets/js/frontend_book.js') ?>"></script>
 
 <script>
diff --git a/assets/js/frontend_book_api.js b/assets/js/frontend_book_api.js
index 1e31415122..a21e6ae95b 100755
--- a/assets/js/frontend_book_api.js
+++ b/assets/js/frontend_book_api.js
@@ -273,10 +273,10 @@ window.FrontendBookApi = window.FrontendBookApi || {};
     };
 
     function applyUnavailableDates(unavailableDates, selectedDateString, setDate) {
-        // Start ZTL Modification 
+// Start ZTL Modification
         // Allows enforcement booking policy no more than 2 weeks in the future
         const BOOKINGWINDOW = 14; // How many days in the future is booking open for students?
-        let bookingWindowTime = new Date.getTime() + (BOOKINGWINDOW * 24 * 60 * 60 * 1000);
+        let bookingWindowTime = new Date().getTime() + (BOOKINGWINDOW * 24 * 60 * 60 * 1000);
         setDate = setDate || false;
 
         processingUnavailabilities = true;
@@ -289,7 +289,6 @@ window.FrontendBookApi = window.FrontendBookApi || {};
             for (var i = 1; i <= numberOfDays; i++) {
                 var currentDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), i);
                 if ((unavailableDates.indexOf(currentDate.toString('yyyy-MM-dd')) === -1) && (currentDate.getTime() <= bookingWindowTime)) {
-        // End ZTL Modification
                     $('#select-date').datepicker('setDate', currentDate);
                     FrontendBookApi.getAvailableHours(currentDate.toString('yyyy-MM-dd'));
                     break;
@@ -305,9 +304,14 @@ window.FrontendBookApi = window.FrontendBookApi || {};
         // Grey out unavailable dates.
         $('#select-date .ui-datepicker-calendar td:not(.ui-datepicker-other-month)').each(function (index, td) {
             selectedDate.set({day: index + 1});
-            if (unavailableDates.indexOf(selectedDate.toString('yyyy-MM-dd')) !== -1) {
+            if ((unavailableDates.indexOf(selectedDate.toString('yyyy-MM-dd')) !== -1) || (selectedDate.getTime() > bookingWindowTime)) {
                 $(td).addClass('ui-datepicker-unselectable ui-state-disabled');
             }
+            var firstDaySelectedMonth = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
+            if(firstDaySelectedMonth.getTime() > bookingWindowTime) {
+               $('#available-hours').text(EALang.no_available_hours);
+            }
+// End ZTL Modification
         });
 
         processingUnavailabilities = false;