Make sure the right provider timezone information is displayed in the appointment and unavailability modals

assets/js/components/appointments_modal.js

@@ -167,6 +167,8 @@ App.Components.AppointmentsModal = (function () {
             } else {
                 $selectService.find('option:first').prop('selected', true).trigger('change');
             }
+            
+            $selectProvider.trigger('change');
 
             const serviceId = $selectService.val();
 

assets/js/components/unavailabilities_modal.js

@@ -28,10 +28,34 @@ App.Components.UnavailabilitiesModal = (function () {
     const $selectFilterItem = $('#select-filter-item');
     const $reloadAppointments = $('#reload-appointments');
 
+    /**
+     * Update the displayed timezone.
+     */
+    function updateTimezone() {
+        const providerId = $selectProvider.val();
+
+        const provider = vars('available_providers').find(
+            (availableProvider) => Number(availableProvider.id) === Number(providerId)
+        );
+
+        if (provider && provider.timezone) {
+            $unavailabilitiesModal.find('.provider-timezone').text(
+                vars('timezones')[provider.timezone]
+            );
+        }
+    }
+
     /**
      * Add the component event listeners.
      */
     function addEventListeners() {
+        /**
+         * Event: Provider "Change"
+         */
+        $selectProvider.on('change', () => {
+            updateTimezone();
+        });
+        
         /**
          * Event: Manage Unavailability Dialog Save Button "Click"
          *

assets/js/utils/calendar_default_view.js

@@ -1506,6 +1506,8 @@ App.Utils.CalendarDefaultView = (function () {
                                 $('#unavailability-provider option:first').prop('selected', true);
                             }
 
+                            $('#unavailability-provider').trigger('change');
+
                             $('#unavailability-start').datepicker('setDate', info.start);
 
                             $('#unavailability-end').datepicker('setDate', info.end);