#23183·vuetify

[Feature Request] Add first-day-of-week to v-heatmap for calendar view

Author: KRaymundusCreated Sep 14, 2026Updated Sep 15, 2026
LabelsT: featureC: VHeatmap

Problem to solve

v-heatmap can already look like a calendar (group-by month, one column per week, weekday rows). Week start is not a component concern today. You have to supply it yourself:

  • rows ordered from the first weekday
  • item-row as date.getDay()
  • week column keys that match that first day v-date-picker already has first-day-of-week (0 = Sunday). Heatmap calendar view does not, so locale weeks (Monday-first in most of Europe) are easy to get wrong. That also shows up in month overlap. Overlap is columns[0].cells[0] == null and the next group is shifted by groupGap - cellWidth. That matches the docs calendar example with Sunday-first rows [0, 1, 2, 3, 4, 5, 6]. With Monday-first rows, a month that starts on Sunday only has that leftover Sunday in the first column, overlap still runs, and a non-zero group-gap leaves Sunday offset from the week it belongs to. You cannot have Monday-first weeks, a month gap, and aligned weeks at the same time.

Proposed solution

Add first-day-of-week on v-heatmap, same meaning as v-date-picker: 0 Sunday through 6 Saturday. When it is set (or when the date adapter’s locale week start is used as the default):

  1. Weekday rows are ordered from that day (e.g. Monday-first → Mon … Sun).
  2. Week columns start on that day.
  3. Mid-week month overlap follows that week, and overlapping weeks share a column. Keep group-gap as space between months only, not as part of the overlap offset. The docs calendar example could then use first-day-of-week instead of hand-rolled rows / item-row.