diff --git a/application/views/components/manage_unavailable_modal.php b/application/views/components/unavailabilities_modal.php
similarity index 94%
rename from application/views/components/manage_unavailable_modal.php
rename to application/views/components/unavailabilities_modal.php
index c3cf5833..eeb24caf 100644
--- a/application/views/components/manage_unavailable_modal.php
+++ b/application/views/components/unavailabilities_modal.php
@@ -5,7 +5,7 @@
  */
 ?>
 
-<div id="manage-unavailable" class="modal fade">
+<div id="unavailabilities-modal" class="modal fade">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
@@ -83,3 +83,9 @@
         </div>
     </div>
 </div>
+
+<?php section('scripts') ?>
+
+<script src="<?= asset_url('assets/js/components/unavailabilities_modal.js') ?>"></script>
+
+<?php section('scripts') ?> 
diff --git a/application/views/pages/calendar.php b/application/views/pages/calendar.php
index e831d0f5..759af8fe 100755
--- a/application/views/pages/calendar.php
+++ b/application/views/pages/calendar.php
@@ -42,7 +42,6 @@
 <script src="<?= asset_url('assets/vendor/jquery-jeditable/jquery.jeditable.min.js') ?>"></script>
 <script src="<?= asset_url('assets/vendor/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.min.js') ?>"></script>
 <script src="<?= asset_url('assets/js/components/working_plan_exceptions_modal.js') ?>"></script>
-<script src="<?= asset_url('assets/js/components/manage_unavailabilities_modal.js') ?>"></script>
 <script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
 <script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
 <script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
@@ -159,7 +158,7 @@
 
 <?php 
     component(
-        'manage_unavailable_modal', 
+        'unavailabilities_modal', 
         '',
         [
             'timezones' => $timezones,
diff --git a/assets/js/components/manage_unavailabilities_modal.js b/assets/js/components/unavailabilities_modal.js
similarity index 95%
rename from assets/js/components/manage_unavailabilities_modal.js
rename to assets/js/components/unavailabilities_modal.js
index 66c5ef2d..4157cff2 100755
--- a/assets/js/components/manage_unavailabilities_modal.js
+++ b/assets/js/components/unavailabilities_modal.js
@@ -10,21 +10,21 @@
  * ---------------------------------------------------------------------------- */
 
 /**
- * Backend Calendar Unavailability Events Modal
+ * Unavailabilities Modal
  *
  * This module implements the unavailability events modal functionality.
  *
- * Old Module Name: BackendCalendarUnavailabilityEventsModal
+ * Old Name: BackendCalendarUnavailabilityEventsModal
  */
-App.Components.ManageUnavailabilitiesModal = (function () {
+App.Components.UnavailabilitiesModal = (function () {
     function bindEventHandlers() {
         /**
          * Event: Manage Unavailable Dialog Save Button "Click"
          *
          * Stores the unavailable period changes or inserts a new record.
          */
-        $('#manage-unavailable #save-unavailable').on('click', () => {
-            const $dialog = $('#manage-unavailable');
+        $('#unavailabilities-modal #save-unavailable').on('click', () => {
+            const $dialog = $('#unavailabilities-modal');
             $dialog.find('.modal-message').addClass('d-none');
             $dialog.find('.is-invalid').removeClass('is-invalid');
 
@@ -94,7 +94,7 @@ App.Components.ManageUnavailabilitiesModal = (function () {
         $('#insert-unavailable').on('click', () => {
             resetUnavailableDialog();
 
-            const $dialog = $('#manage-unavailable');
+            const $dialog = $('#unavailabilities-modal');
 
             // Set the default datetime values.
             const startMoment = moment();
@@ -136,11 +136,11 @@ App.Components.ManageUnavailabilitiesModal = (function () {
     /**
      * Reset unavailable dialog form.
      *
-     * Reset the "#manage-unavailable" dialog. Use this method to bring the dialog to the initial state
+     * Reset the "#unavailabilities-modal" dialog. Use this method to bring the dialog to the initial state
      * before it becomes visible to the user.
      */
     function resetUnavailableDialog() {
-        const $dialog = $('#manage-unavailable');
+        const $dialog = $('#unavailabilities-modal');
 
         $dialog.find('#unavailable-id').val('');
 
diff --git a/assets/js/pages/calendar.js b/assets/js/pages/calendar.js
index 7e0d4318..8eb5fd7c 100755
--- a/assets/js/pages/calendar.js
+++ b/assets/js/pages/calendar.js
@@ -110,7 +110,7 @@ App.Pages.Calendar = (function () {
 
         App.Components.AppointmentsModal.initialize();
 
-        App.Components.ManageUnavailabilitiesModal.initialize();
+        App.Components.UnavailabilitiesModal.initialize();
 
         // Load and initialize the calendar view.
         if (view === 'table') {
diff --git a/assets/js/utils/calendar_default_view.js b/assets/js/utils/calendar_default_view.js
index 30937a43..0039cd81 100755
--- a/assets/js/utils/calendar_default_view.js
+++ b/assets/js/utils/calendar_default_view.js
@@ -143,8 +143,8 @@ App.Utils.CalendarDefaultView = (function () {
                 unavailable.end_datetime = lastFocusedEventData.end.format('YYYY-MM-DD HH:mm:ss');
                 endMoment = moment(unavailable.end_datetime);
 
-                $dialog = $('#manage-unavailable');
-                App.Components.ManageUnavailabilitiesModal.resetUnavailableDialog();
+                $dialog = $('#unavailabilities-modal');
+                App.Components.UnavailabilitiesModal.resetUnavailableDialog();
 
                 // Apply unavailable data to dialog.
                 $dialog.find('.modal-header h3').text('Edit Unavailable Period');
diff --git a/assets/js/utils/calendar_table_view.js b/assets/js/utils/calendar_table_view.js
index 335d8d9a..d89a6613 100755
--- a/assets/js/utils/calendar_table_view.js
+++ b/assets/js/utils/calendar_table_view.js
@@ -223,7 +223,7 @@ App.Utils.CalendarTableView = (function () {
                 unavailable.end_datetime = lastFocusedEventData.end.format('YYYY-MM-DD HH:mm:ss');
                 endMoment = moment(unavailable.end_datetime);
 
-                $dialog = $('#manage-unavailable');
+                $dialog = $('#unavailabilities-modal');
                 BackendCalendarUnavailabilityEventsModal.resetUnavailableDialog();
 
                 // Apply unavailable data to dialog.