diff --git a/app/frontend/src/javascript/controllers/admin/calendar.js b/app/frontend/src/javascript/controllers/admin/calendar.js
index a766991fc..6a8be6637 100644
--- a/app/frontend/src/javascript/controllers/admin/calendar.js
+++ b/app/frontend/src/javascript/controllers/admin/calendar.js
@@ -1008,6 +1008,13 @@ Application.Controllers.controller('CreateEventModalController', ['$scope', '$ui
         // update availability object
         $scope.availability.start_at = $scope.start;
       });
+      // Maintain consistency between the end time and the date object in the availability object
+      $scope.$watch('end', function (newValue, oldValue, scope) {
+        if (newValue.valueOf() !== oldValue.valueOf()) {
+          // update availability object
+          $scope.availability.end_at = $scope.end;
+        }
+      });
 
       $scope.$watch('startTime', function (newValue, oldValue, scope) {
         // adjust the start/endTime
@@ -1020,14 +1027,9 @@ Application.Controllers.controller('CreateEventModalController', ['$scope', '$ui
         $scope.endTime = endTime.toDate();
       });
 
-      $scope.$watch('endTime', function (newValue, oldValue, scope) {
-        // adjust the start/endTime
-        const end = moment($scope.end);
-        const diff = moment.tz(newValue, moment.tz.guess()).diff(moment.tz(oldValue, moment.tz.guess()));
-        end.add(diff, 'milliseconds');
-        $scope.end = end.toDate();
-        $scope.availability.end_at = $scope.end;
-      });
+      $scope.endTimeChanged = function () {
+        $scope.end = moment.tz($scope.endTime, moment.tz.guess()).toDate();
+      };
     };
 
     /*
diff --git a/app/frontend/templates/admin/calendar/eventModal.html b/app/frontend/templates/admin/calendar/eventModal.html
index 00418d5eb..732c62ed2 100644
--- a/app/frontend/templates/admin/calendar/eventModal.html
+++ b/app/frontend/templates/admin/calendar/eventModal.html
@@ -106,7 +106,7 @@ <h3 class="text-center red">
           </div>
           <span class="col-md-1 m-t-xl m-l" translate>{{ 'app.admin.calendar.to_time' }}</span>
           <fieldset ng-disabled="endDateReadOnly" class="col-md-5">
-              <uib-timepicker ng-model="endTime" hour-step="timepickers.end.hstep" readonly-input="true" minute-step="timepickers.end.mstep" show-meridian="false"></uib-timepicker>
+            <uib-timepicker ng-model="endTime" hour-step="timepickers.end.hstep" readonly-input="true" minute-step="timepickers.end.mstep" show-meridian="false" ng-change="endTimeChanged()"></uib-timepicker>
           </fieldset>
       </div>
   </div>