| | |
|---|
| | | <template> |
|---|
| | | <div class="calenBox"> |
|---|
| | | <el-calendar ref="calendar" v-model="currentMonth" > |
|---|
| | | <el-calendar ref="calendar" v-model="currentMonth" :class="{ |
|---|
| | | 'five-rows': weeksNeeded === 5, |
|---|
| | | 'six-rows': weeksNeeded === 6 |
|---|
| | | }"> |
|---|
| | | <template #header="{ date }"> |
|---|
| | | <div> |
|---|
| | | <img :src="caleft" alt="" @click="selectDate('prev-month')" /> |
|---|
| | | |
|---|
| | | <el-date-picker |
|---|
| | | v-model="currentMonth" |
|---|
| | | type="month" |
|---|
| | |
|---|
| | | </el-calendar> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup> |
|---|
| | | import dayjs from 'dayjs'; |
|---|
| | | import { ref, watch, onMounted, nextTick } from 'vue'; |
|---|
| | |
|---|
| | | import ev2 from '@/assets/images/workbench/ev2.svg'; |
|---|
| | | import caleft from '@/assets/images/workbench/caleft.png'; |
|---|
| | | import caright from '@/assets/images/workbench/caright.png'; |
|---|
| | | |
|---|
| | | const router = useRouter(); |
|---|
| | | const calendar = ref(); |
|---|
| | | const events = ref({}); |
|---|
| | |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const weeksNeeded = computed(() => { |
|---|
| | | const date = dayjs(currentMonth.value); |
|---|
| | | const firstDay = date.startOf('month').day(); // 0-6 (周日到周六) |
|---|
| | | const days = date.daysInMonth(); |
|---|
| | | |
|---|
| | | // 强制 2025 年 6 月显示六行 |
|---|
| | | //if (date.year() === 2025 && date.month() === 5) { |
|---|
| | | // return 6; |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // 其他月份按原逻辑计算 |
|---|
| | | return Math.ceil((firstDay + days) / 7); |
|---|
| | | }) |
|---|
| | | const isSixRows = computed(() => weeksNeeded.value > 5); |
|---|
| | | onMounted(() => { |
|---|
| | | // 初始化时如果是当前月份，选中当天；否则不选中 |
|---|
| | | if (isCurrentMonth(currentMonth.value)) { |
|---|
| | |
|---|
| | | } |
|---|
| | | .el-calendar-table .el-calendar-day { |
|---|
| | | box-sizing: border-box; |
|---|
| | | padding: 0.8rem; |
|---|
| | | padding: 0.4rem 0.8rem 0.8rem 0.8rem; |
|---|
| | | background: #f5f7fa; |
|---|
| | | border-radius: 6px 6px 6px 6px; |
|---|
| | | border: 1px solid #efefef; |
|---|
| | |
|---|
| | | font-size: 14px; |
|---|
| | | color: #363636; |
|---|
| | | } |
|---|
| | | .el-calendar-table .el-calendar-day { |
|---|
| | | height: pxToVh(88) !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | &.five-rows .el-calendar-table .el-calendar-day { |
|---|
| | | height: pxToVh(92) !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &.six-rows .el-calendar-table .el-calendar-day { |
|---|
| | | height: pxToVh(78) !important; |
|---|
| | | } |
|---|
| | | // 选中日期样式 |
|---|
| | | .el-calendar-table td.is-selected { |
|---|
| | | .el-calendar-day { |
|---|
