vuetifyjs / vuetifyjs/vuetify

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

Open
#23,183 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

C: VHeatmap T: feature
Dominant language
TypeScript
Stars
41k
Forks
7.1k
Avg merge
1d 21h
Merged PRs (30d)
11

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the v-heatmap calendar view, the existing v-date-picker first-day-of-week behavior, and the date adapter’s locale week-start handling. Trace the rows, week columns, month overlap, and group-gap calculations; the work is complete when Monday- or locale-first calendars keep weekday order, month overlap, and week alignment while the docs calendar example no longer needs hand-rolled rows and item-row.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.