Vuetify v-calendar如何设置从当日10点显示至次日3点？

问题重现 #

使用Vuetify的v-calendar组件时，需要将日历显示范围设置为当日10:00开始，次日3:00结束，当前组件代码如下：

<v-calendar
  ref="calendar"
  v-model="focus"
  color="primary"
  type="category"
  category-show-all
  :categories="categories"
  :events="events"
  :event-color="getEventColor"
  first-interval=10
  interval-minutes= 60  
  @change="fetchEvents()"
></v-calendar>

相关问题截图：

解决方案 #

通过配置day-start和day-end属性即可实现跨天的时间范围显示，具体调整如下：

修改后的组件代码 #

<v-calendar
  ref="calendar"
  v-model="focus"
  color="primary"
  type="category"
  category-show-all
  :categories="categories"
  :events="events"
  :event-color="getEventColor"
  day-start="10"
  day-end="27"
  first-interval="10"
  interval-minutes="60"
  @change="fetchEvents()"
></v-calendar>

关键配置说明 #

• day-start="10"：将日历的起始时间固定为当日10:00
• day-end="27"：Vuetify的day-end支持大于24的数值，27代表当日24:00 + 3小时，即次日3:00，以此实现跨天显示
• first-interval="10"：确保日历第一个显示的时间间隔与day-start对应，保持时间轴的一致性
• interval-minutes="60"：维持原有的每小时一个时间间隔的设置

额外注意 #

确保focus变量的初始值为当前日期（如new Date()），这样日历默认加载时就会显示目标时间范围。

内容的提问来源于stack exchange，提问作者Mayuu Furuki