From ef4939009f1954dacdb1872f3c5038e63acc3c62 Mon Sep 17 00:00:00 2001
From: DarkSky <25152247+darkskygit@users.noreply.github.com>
Date: Mon, 18 May 2026 09:32:02 +0800
Subject: [PATCH] feat(editor): handle calendar view overflow in edgeless mode
 (#14992)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### PR Dependency Tree


* **PR #14992** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Calendar view now supports horizontal scrolling for better navigation.

* **Bug Fixes**
* Improved mouse wheel interaction handling to prevent unintended
scrolling.

* **Style**
* Calendar layout is now more responsive and adapts better to different
screen sizes.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/toeverything/AFFiNE/pull/14992?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/view-presets/calendar/pc/styles.ts      | 11 ++++++++++-
 .../src/view-presets/calendar/pc/view.ts        | 17 ++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

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