diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7f95b99dc..ebdd25f8a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Next release
 
 - Fix a bug: unable to show Fabmanager network project picture
+- Fix a bug: availability slot date error in calendar when user pc timezone is different from server timezone
 
 ## v6.3.20 2024 Avril 15
 
diff --git a/app/frontend/src/javascript/controllers/admin/calendar.js b/app/frontend/src/javascript/controllers/admin/calendar.js
index 77b132488..e90236798 100644
--- a/app/frontend/src/javascript/controllers/admin/calendar.js
+++ b/app/frontend/src/javascript/controllers/admin/calendar.js
@@ -715,6 +715,9 @@ Application.Controllers.controller('CreateEventModalController', ['$scope', '$ui
     // $uibModal parameter
     $scope.end = end;
 
+    $scope.startTime = moment(start).format('YYYY-MM-DD HH:mm:ss');
+    $scope.endTime = moment(end).format('YYYY-MM-DD HH:mm:ss');
+
     // machines list
     $scope.machines = machinesPromise.filter(function (m) { return !m.disabled && m.reservable; });
 
@@ -959,6 +962,7 @@ Application.Controllers.controller('CreateEventModalController', ['$scope', '$ui
         const startSlot = moment($scope.start);
         startSlot.add(newValue * $scope.slots_nb, 'minutes');
         $scope.end = startSlot.toDate();
+        $scope.endTime = moment($scope.end).format('YYYY-MM-DD HH:mm:ss');
       });
 
       // When the number of slot changes, we increment the availability to match the value
@@ -966,6 +970,7 @@ Application.Controllers.controller('CreateEventModalController', ['$scope', '$ui
         const startSlot = moment($scope.start);
         startSlot.add($scope.availability.slot_duration * newValue, 'minutes');
         $scope.end = startSlot.toDate();
+        $scope.endTime = moment($scope.end).format('YYYY-MM-DD HH:mm:ss');
       });
 
       // When we configure a machine/space availability, do not let the user change the end time, as the total
@@ -981,6 +986,7 @@ Application.Controllers.controller('CreateEventModalController', ['$scope', '$ui
             const upperSlots = Math.ceil(slotsCurrentRange);
             const upper = upperSlots * $scope.availability.slot_duration;
             $scope.end = moment($scope.start).add(upper, 'minutes').toDate();
+            $scope.endTime = moment($scope.end).format('YYYY-MM-DD HH:mm:ss');
             $scope.slots_nb = upperSlots;
           } else {
             $scope.slots_nb = slotsCurrentRange;
@@ -1014,6 +1020,17 @@ Application.Controllers.controller('CreateEventModalController', ['$scope', '$ui
           $scope.availability.end_at = $scope.end;
         }
       });
+
+      $scope.$watch('startTime', function (newValue, oldValue, scope) {
+        // adjust the start/endTime
+        const start = moment($scope.start);
+        const endTime = moment($scope.endTime);
+        const diff = moment.tz(newValue, moment.tz.guess()).diff(moment.tz(oldValue, moment.tz.guess()));
+        start.add(diff, 'milliseconds');
+        endTime.add(diff, 'milliseconds');
+        $scope.start = start.toDate();
+        $scope.endTime = endTime.toDate();
+      });
     };
 
     /*
diff --git a/app/frontend/templates/admin/calendar/eventModal.html b/app/frontend/templates/admin/calendar/eventModal.html
index 077d3986c..00418d5eb 100644
--- a/app/frontend/templates/admin/calendar/eventModal.html
+++ b/app/frontend/templates/admin/calendar/eventModal.html
@@ -102,11 +102,11 @@
       <p class="text-center font-sbold" translate>{{ 'app.admin.calendar.adjust_the_opening_hours' }}</p>
       <div class="row">
           <div class="col-md-3 col-md-offset-2">
-              <uib-timepicker ng-model="start" hour-step="timepickers.start.hstep" readonly-input="true" minute-step="timepickers.start.mstep" show-meridian="false"></uib-timepicker>
+              <uib-timepicker ng-model="startTime" hour-step="timepickers.start.hstep" readonly-input="true" minute-step="timepickers.start.mstep" show-meridian="false"></uib-timepicker>
           </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="end" 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"></uib-timepicker>
           </fieldset>
       </div>
   </div>