提交

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/tasks/taskCalendar.vue

@@ -1,7 +1,7 @@
 
 
 <template>
-  <div class="w-full h-full flex flex-col">
+  <div class="w-full h-full flex flex-col calendarPlugin">
     <div class="flex-1" v-loading="calendarLoading">
       <FullCalendar ref="calendarRef" :options="calendarOptions" class="h-full w-full">
         <template v-slot:eventContent='arg'>
@@ -43,13 +43,18 @@ const calendarOptions = ref<any>({
   initialView: currentView.value,
   slotMinTime: '06:00:00',  // 最早显示时间
   slotMaxTime: '22:00:00',  // 最晚显示时间
-  slotDuration: '00:30:00', // 30分钟一格（timeGrid生效）
+  slotDuration: '01:00:00', // 一个小时一格（timeGrid生效）
   events: [],
   headerToolbar: {  // 自定义头部
     left: 'today,prev,next',  // 左侧按钮：上一页，下一页，今天
     center: 'title',
     right: 'dayGridMonth,timeGridWeek,timeGridDay'  // 右侧显示视图切换按钮
   },
+  slotLabelContent: (arg: any) => {
+    const hour = arg.date.getHours()
+    const meridiem = hour < 12 ? '上午' : '下午'
+    return `${meridiem} ${hour} 时`
+  },
   datesSet: (arg: any) => { // 📌 每次切换视图或日期都会触发
     const { startStr = '', endStr = '' } = arg
     if (startStr && endStr) {
@@ -71,7 +76,11 @@ function renderTableData() {
         ...item,
         start: item.startDate,
         end: item.endDate,
-        title: item.taskName
+        title: item.taskName,
+        // backgroundColor: ['#909399', '#075985', '#67C23A', '#F56C6C'][item.status],
+        // borderColor: ['#909399', '#075985', '#67C23A', '#F56C6C'][item.status]
+        backgroundColor: ['#a6a9b0', '#5a8aa5', '#7fbf72', '#e28c8c'][item.status],
+        borderColor: ['#a6a9b0', '#5a8aa5', '#7fbf72', '#e28c8c'][item.status],
       }
     })
   }
@@ -101,7 +110,25 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-:deep(.fc-today-button) {
-  margin-right: 10px;
-} 
+.calendarPlugin {
+  :deep(.fc-today-button) {
+    margin-right: 10px;
+  }
+  :deep(table) {
+    height: 100%;
+  }
+  
+  /* 强制事件内文字换行 */
+  :deep(.fc-timegrid-col-events .fc-event-main) div {
+    width: 50%;
+    white-space: normal !important;
+    word-break: break-word;
+  }
+
+  :deep(.fc-timegrid-col-events .fc-timegrid-event-harness:last-child .fc-event-main) div {
+    width: 100%;
+    white-space: normal !important;
+    word-break: break-word;
+  }
+}
 </style>