diff --git a/.workbuddy/memory/2026-04-01.md b/.workbuddy/memory/2026-04-01.md index 69aab5f..ab12fad 100644 --- a/.workbuddy/memory/2026-04-01.md +++ b/.workbuddy/memory/2026-04-01.md @@ -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高度,格子均匀分布 diff --git a/frontend/ops_vue_js/src/components/datatimePickerForFullCalendar.vue b/frontend/ops_vue_js/src/components/datatimePickerForFullCalendar.vue index fe40166..d1c22b8 100644 --- a/frontend/ops_vue_js/src/components/datatimePickerForFullCalendar.vue +++ b/frontend/ops_vue_js/src/components/datatimePickerForFullCalendar.vue @@ -1,5 +1,5 @@ diff --git a/frontend/ops_vue_js/src/views/scheduleView.vue b/frontend/ops_vue_js/src/views/scheduleView.vue index 6fdbb78..31b2cff 100644 --- a/frontend/ops_vue_js/src/views/scheduleView.vue +++ b/frontend/ops_vue_js/src/views/scheduleView.vue @@ -419,6 +419,8 @@ onMounted(() => {