diff --git a/blocksuite/affine/data-view/src/view-presets/calendar/pc/styles.ts b/blocksuite/affine/data-view/src/view-presets/calendar/pc/styles.ts
index 48fc757015c09..c17182b2e2cb0 100644
--- a/blocksuite/affine/data-view/src/view-presets/calendar/pc/styles.ts
+++ b/blocksuite/affine/data-view/src/view-presets/calendar/pc/styles.ts
@@ -3,7 +3,9 @@ import { css } from 'lit';
 export const calendarViewStyles = css`
   affine-data-view-calendar {
     display: block;
-    min-width: 720px;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
     --calendar-entry-height: 22px;
     --calendar-entry-gap: 3px;
     --calendar-entry-slot-height: calc(
@@ -32,8 +34,15 @@ export const calendarViewStyles = css`
     --calendar-external-fallback-color: #b45309;
   }
 
+  .calendar-scroll {
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
   .calendar-shell {
     position: relative;
+    min-width: 720px;
     padding: 0 0 12px;
   }
 
diff --git a/blocksuite/affine/data-view/src/view-presets/calendar/pc/view.ts b/blocksuite/affine/data-view/src/view-presets/calendar/pc/view.ts
index 79cadcf128bf8..f193dc5179076 100644
--- a/blocksuite/affine/data-view/src/view-presets/calendar/pc/view.ts
+++ b/blocksuite/affine/data-view/src/view-presets/calendar/pc/view.ts
@@ -178,6 +178,19 @@ export class CalendarViewUILogic extends DataViewUILogicBase<CalendarSingleView>
 
   focusFirstCell = () => {};
 
+  onWheel = (event: WheelEvent) => {
+    if (event.metaKey || event.ctrlKey) {
+      return;
+    }
+    const ele = event.currentTarget;
+    if (ele instanceof HTMLElement) {
+      if (ele.scrollWidth === ele.clientWidth) {
+        return;
+      }
+      event.stopPropagation();
+    }
+  };
+
   showIndicator = () => false;
 
   hideIndicator = () => {};
@@ -1076,7 +1089,9 @@ export class CalendarViewUI extends DataViewUIBase<CalendarViewUILogic> {
           })
         : nothing}
       <div class=${setup ? 'calendar-setup-wrap' : ''}>
-        ${this.renderCalendar(setup)}
+        <div class="calendar-scroll" @wheel="${this.logic.onWheel}">
+          ${this.renderCalendar(setup)}
+        </div>
         ${setup
           ? html`<div class="calendar-setup">
               <button