|
|
@@ -41,21 +41,21 @@ const calendarOptions = ref<any>({
|
|
|
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
|
|
|
locale: zhCnLocale,
|
|
|
initialView: currentView.value,
|
|
|
- slotMinTime: '06:00:00', // 最早显示时间
|
|
|
- slotMaxTime: '22:00:00', // 最晚显示时间
|
|
|
- slotDuration: '01:00:00', // 一个小时一格（timeGrid生效）
|
|
|
+ slotMinTime: '06:00:00',
|
|
|
+ slotMaxTime: '22:00:00',
|
|
|
+ slotDuration: '01:00:00',
|
|
|
events: [],
|
|
|
- headerToolbar: { // 自定义头部
|
|
|
- left: 'today,prev,next', // 左侧按钮：上一页，下一页，今天
|
|
|
+ headerToolbar: {
|
|
|
+ left: 'today,prev,next',
|
|
|
center: 'title',
|
|
|
- right: 'dayGridMonth,timeGridWeek,timeGridDay' // 右侧显示视图切换按钮
|
|
|
+ right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
|
|
},
|
|
|
slotLabelContent: (arg: any) => {
|
|
|
const hour = arg.date.getHours()
|
|
|
const meridiem = hour < 12 ? '上午' : '下午'
|
|
|
return `${meridiem} ${hour} 时`
|
|
|
},
|
|
|
- datesSet: (arg: any) => { // 📌 每次切换视图或日期都会触发
|
|
|
+ datesSet: (arg: any) => {
|
|
|
const { startStr = '', endStr = '' } = arg
|
|
|
if (startStr && endStr) {
|
|
|
dateForm.value = {
|
|
|
@@ -64,7 +64,7 @@ const calendarOptions = ref<any>({
|
|
|
}
|
|
|
getTaskCalendar()
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
})
|
|
|
|
|
|
// 重新渲染表格数据
|
|
|
@@ -77,10 +77,13 @@ function renderTableData() {
|
|
|
start: item.startDate,
|
|
|
end: item.endDate,
|
|
|
title: item.taskName,
|
|
|
+ backgroundColor: item.status == 1 ? item.color : ['#909399', '#075985', '#67C23A', '#F56C6C'][item.status],
|
|
|
+ borderColor: item.status == 1 ? item.color : ['#909399', '#075985', '#67C23A', '#F56C6C'][item.status],
|
|
|
// backgroundColor: ['#909399', '#075985', '#67C23A', '#F56C6C'][item.status],
|
|
|
// borderColor: ['#909399', '#075985', '#67C23A', '#F56C6C'][item.status]
|
|
|
- backgroundColor: ['#a6a9b0', '#3a7fc1', '#7fbf72', '#e28c8c'][item.status],
|
|
|
- borderColor: ['#a6a9b0', '#3a7fc1', '#7fbf72', '#e28c8c'][item.status],
|
|
|
+
|
|
|
+ // backgroundColor: ['#a6a9b0', '#3a7fc1', '#7fbf72', '#e28c8c'][item.status],
|
|
|
+ // borderColor: ['#a6a9b0', '#3a7fc1', '#7fbf72', '#e28c8c'][item.status],
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
@@ -130,5 +133,15 @@ defineExpose({
|
|
|
white-space: normal !important;
|
|
|
word-break: break-word;
|
|
|
}
|
|
|
+
|
|
|
+ :deep(.fc-event-main) {
|
|
|
+ font-size: 20px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.fc-daygrid-day-events) {
|
|
|
+ font-size: 20px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
