Skip to content

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

Open

Description

@KRaymundus

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.

Activity

  1. added this to the v4.x.x milestone on Sep 15, 2026
  2. Saifjafri212213 commented on Oct 7, 2026

    @Saifjafri212213

    Hi 👋 I'd like to work on this. Could it be assigned to me (@Saifjafri212213)? I'd add a first-day-of-week prop to v-heatmap matching v-date-picker's behaviour, use it to order the weekday rows and week column keys in calendar view, make sure the month-overlap offset stays correct, and update the docs example and tests. Thanks!

  3. J-Sek commented on Oct 7, 2026

    @J-Sek
    Contributor

    We only assign core team members. You are free to post a PR regardless.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions