diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 2a89b42318..2c4c025d6c 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -842,6 +842,17 @@ const newRecord = (hour: dayjs.Dayjs) => {
   }
   emit('newRecord', record)
 }
+
+watch(
+  () => recordsAcrossAllRange.value,
+  () => {
+    setTimeout(() => {
+      if (isDragging.value) return
+      document.querySelectorAll('.draggable-record').item(0)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    }, 100)
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 5b6eded261..ea23ddc272 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -717,6 +717,15 @@ const addRecord = (date: dayjs.Dayjs) => {
   }
   emits('newRecord', newRecord)
 }
+
+watch(
+  () => recordsAcrossAllRange.value,
+  () => {
+    if (dragRecord.value) return
+    document.querySelectorAll('.draggable-record').item(0)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  },
+  { immediate: true },
+)
 </script>
 
 <template>