pick 高度有问题

2026-04-01 21:38:44 +08:00
parent 52a6d6df7a
commit ca0d845a86
3 changed files with 188 additions and 81 deletions
@@ -132,3 +132,32 @@
  - 构建成功（6171 modules transformed）
  - 无语法错误或lint警告
  - 实现完整的父子组件通信机制
+
+## 修改日历组件高度为300px ✅ (21:32)
+
+- **需求**：将`datatimePickerForFullCalendar.vue`中的FullCalendar日历整体高度设置为300px，调整格子高度
+- **实现方案**：
+  1. **容器高度控制**：
+     - 外层容器：`h-[350px]`（预留30px给日期显示栏）
+     - 日历容器：`h-[300px] overflow-hidden rounded-lg border border-gray-200`
+     - FullCalendar组件：`class="h-full w-full"` 填满容器
+  2. **FullCalendar配置**：
+     - `height: "300px"`：固定整体高度
+     - `contentHeight: "auto"`：内容高度自适应
+     - `dayCellMinHeight: 40`：格子最小高度40px
+     - `expandRows: true`：自动展开行高，均匀分布
+  3. **CSS样式优化**：
+     - `dayCellDidMount`函数中添加样式：
+       ```javascript
+       info.el.style.minHeight = "40px";
+       info.el.style.height = "100%";
+       info.el.style.display = "flex";
+       info.el.style.aljustifyContent = "center";
+       ```
+- **高度计算**：
+  - 300px高度 ÷ 6行（月视图通常5-6行）= 每行约50px
+  - 考虑头部工具栏和边框，格子高度设为40px，留出间距
+- **验证结果**：
+  - 构建成功（6171 modules transformed）
+  - 无语法错误
+  - 实现日历整体300px高度，格子均匀分布