如何让Vuetify v-calendar中带v-present的今日日期始终位于周视图中间列

核心思路 #

默认周模式按自然周（周日到周六/周一到周日）渲染，要固定今日在中间，需要手动计算以今日为中心的7天日期区间，替换组件默认的自然周区间，同时适配周切换逻辑即可。

具体实现步骤 #

1. 定义基础变量与区间计算逻辑 #

首先定义响应式变量，以及以任意日期为中心计算7天区间的方法：

// 以Vue3 + Vuetify3为例
import { ref, onMounted } from 'vue'

const selectedDate = ref(new Date())
const customWeekRange = ref([])

// 计算以传入日期为中心的7天区间
const computeCustomWeek = (centerDate) => {
  const range = []
  const center = new Date(centerDate)
  // 往前推3天 + 当日 + 往后推3天，刚好7天，今日位于第4位即中间列
  for (let i = -3; i <= 3; i++) {
    const date = new Date(center)
    date.setDate(center.getDate() + i)
    range.push(date)
  }
  customWeekRange.value = range
}

// 页面初始化时计算一次初始区间
onMounted(() => {
  computeCustomWeek(selectedDate.value)
})

2. 覆盖v-calendar默认属性 #

给组件绑定自定义的日期区间，禁用默认的自然周渲染逻辑：

<v-calendar
  v-model="selectedDate"
  view="week"
  :min="customWeekRange[0]"
  :max="customWeekRange[6]"
  <!-- 可按需自定义周头标题，不需要可以删掉此行 -->
  :weekdays="['3天前', '2天前', '1天前', '今天', '1天后', '2天后', '3天后']"
  @update:model-value="(newDate) => computeCustomWeek(newDate)"
/>

3. 样式适配（可选） #

如果需要统一列宽、高亮今日，可以加如下CSS：

/* 强制周视图每列宽度均分 */
.v-calendar-weekly__day {
  width: calc(100% / 7);
}
/* 高亮今日列 */
.v-present {
  background-color: #e3f2fd !important;
}

4. 自定义周切换逻辑（可选） #

如果保留周切换功能，替换组件默认的上下周逻辑，每次按7天偏移重新计算区间即可：

// 切换到上一周
const switchPrevWeek = () => {
  const newCenter = new Date(selectedDate.value)
  newCenter.setDate(newCenter.getDate() - 7)
  selectedDate.value = newCenter
  computeCustomWeek(newCenter)
}

// 切换到下一周
const switchNextWeek = () => {
  const newCenter = new Date(selectedDate.value)
  newCenter.setDate(newCenter.getDate() + 7)
  selectedDate.value = newCenter
  computeCustomWeek(newCenter)
}

Vuetify2 适配说明 #

Vuetify2的v-calendar属性略有差异，仅需要把上述代码里的min/max属性替换为start/end，@update:model-value事件替换为@input，其余逻辑完全通用。

内容的提问来源于stack exchange，提问作者islam Abusleem