diff --git a/.workbuddy/expert-history.json b/.workbuddy/expert-history.json
index 501da40..84de70a 100644
--- a/.workbuddy/expert-history.json
+++ b/.workbuddy/expert-history.json
@@ -13,5 +13,5 @@
}
]
},
- "lastUpdated": 1774960846651
+ "lastUpdated": 1774961847595
}
\ No newline at end of file
diff --git a/.workbuddy/memory/2026-03-31.md b/.workbuddy/memory/2026-03-31.md
index b3ffa54..5dde943 100644
--- a/.workbuddy/memory/2026-03-31.md
+++ b/.workbuddy/memory/2026-03-31.md
@@ -585,4 +585,92 @@ const cropImage = async () => {
- **交互体验**:点击头像显示下拉菜单,包含设置和登出选项
### 总结
-通过这次响应式优化,解决了移动端登录用户无法访问头像和用户功能的问题。设计上保持了界面的简洁性,同时通过下拉菜单确保了功能的完整性。这是对现有header组件的用户体验重要改进。>
+通过这次响应式优化,解决了移动端登录用户无法访问头像和用户功能的问题。设计上保持了界面的简洁性,同时通过下拉菜单确保了功能的完整性。这是对现有header组件的用户体验重要改进。
+
+## 日历布局优化 ✅ (2026-03-31 21:05)
+
+### 问题描述
+用户要求"让日历填充所有显示空间"
+- 当前日历布局有最大宽度限制(`max-w-6xl`)和内边距
+- 日历组件没有充分利用可用空间
+- 希望能让日历填充整个页面显示区域
+
+### 解决方案
+#### ScheduleView.vue 布局重构:
+1. **移除宽度限制**:
+ - 移除外层容器的`max-w-6xl`限制
+ - 使用`w-full`确保日历占用所有可用宽度
+
+2. **设置固定高度**:
+ - 使用`h-[calc(100vh-3.5rem)]`计算可用高度(减去header高度)
+ - 确保日历组件有固定的高度用于扩展
+
+3. **优化FullCalendar配置**:
+ - 设置`height: '100%'`让日历填充父容器高度
+ - 添加`expandRows: true`让日历充分利用可用空间
+ - 添加`stickyHeaderDates: true`增强用户体验
+
+4. **改进容器布局**:
+ - 使用flex布局确保正确的空间分配
+ - 添加内部padding保持视觉间距
+ - 保留圆角和阴影提升视觉美感
+
+### 主要修改内容
+
+#### 模板部分:
+```html
+
+```
+
+#### FullCalendar配置:
+- `height: '100%'` - 填充父容器高度
+- `contentHeight: 'auto'` - 自动计算内容高度
+- `expandRows: true` - 展开行以填充可用空间
+- `stickyHeaderDates: true` - 粘性头部日期
+
+### 技术细节
+1. **高度计算**:
+ - `100vh`:视口全高
+ - `3.5rem`:header高度(56px,基于典型header设计)
+ - 使用CSS `calc()`函数动态计算,确保日历不会超出视口
+
+2. **响应式设计**:
+ - 保持桌面端和移动端的一致性
+ - FullCalendar内置响应式功能会根据容器大小自适应
+
+3. **视觉层次**:
+ - 保留圆角边框和阴影,维持应用设计一致性
+ - 内边距适当减少(`p-0.5`)让日历有更多可用空间
+
+### 构建验证
+- ✅ **语法检查**:0 lint errors
+- ✅ **构建测试**:6170 modules,0 errors
+- ✅ **CSS生成**:Tailwind正确识别动态高度类
+- ✅ **浏览器兼容**:现代浏览器支持`calc()`和`100vh`
+
+### 用户体验改进
+1. **更大的显示空间**:日历现在使用所有可用空间,显示更多内容
+2. **更好的布局**:没有不必要的边距和宽度限制
+3. **专业外观**:保留圆角和阴影,保持应用设计一致性
+4. **响应式功能**:FullCalendar根据容器大小动态调整显示
+
+### 预期效果
+- **桌面端**:日历填充整个页面宽度,高度最大化
+- **移动端**:日历根据屏幕尺寸自适应,保持最佳布局
+- **数据量多时**:日历自动调整显示密度,充分利用空间
+- **视图切换**:月/周/日视图都能充分利用可用空间
+
+### 技术要点
+1. **Tailwind动态类**:`h-[calc(100vh-3.5rem)]`是Tailwind v4支持的自定义值语法
+2. **Flex布局**:确保日历容器正确扩展
+3. **FullCalendar配置**:`expandRows: true`是充分利用空间的关键选项
+4. **可访问性**:保持适当的对比度和字体大小,不影响可读性
+
+### 总结
+通过这次优化,日历组件现在能够充分利用页面上的所有可用空间,提供更好的用户体验。这对于排班和日程管理这种需要显示大量信息的场景尤其重要。修改保持了应用的视觉一致性,同时显著改善了日历组件的实用性和可用性。
diff --git a/frontend/ops_vue_js/src/views/scheduleView.vue b/frontend/ops_vue_js/src/views/scheduleView.vue
index a7ccad6..b620e1e 100644
--- a/frontend/ops_vue_js/src/views/scheduleView.vue
+++ b/frontend/ops_vue_js/src/views/scheduleView.vue
@@ -14,7 +14,8 @@ const { t, locale } = useI18n()
const calendarRef = ref(null)
const calendarOptions = ref({
- height: 'auto',
+ height: '100%',
+ contentHeight: 'auto',
locale: locale.value,
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
nowIndicator: true,
@@ -25,6 +26,8 @@ const calendarOptions = ref({
dayMaxEvents: true,
navLinks: true,
firstDay: 1,
+ expandRows: true,
+ stickyHeaderDates: true,
dayCellDidMount(info) {
if (info.date.getDay() === 0 || info.date.getDay() === 6) {
@@ -80,10 +83,11 @@ watch(locale, () => {
-
-
{{ t('schedule.my_schedule') }}
-