vuetifyjs / vuetifyjs/vuetify

[Feature Request] Support scrolling/touch interactions in VMonthPicker

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

Nobody has claimed this yet.

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

Description

Problem to solve

In current version of VMonthPicker it uses a fixed width about ~300px, and i want to show a row of months.
If you set 12 cols for VMonthPicker months and set class="w-100", it displays a row of months, but is cutted when the parent width is too short, and is non scrollable.
See the following image.

Image

Template vue

<v-month-picker
   v-model="selectedMonths"
   hide-header
   hide-title
   :months-columns="12"
   multiple="range"
   class="w-100"
   @update:model-value="searchReservations">
</v-month-picker>
Proposed solution

Set width to 100% to the month picker root, to display the full row of months.
In months, set width to 100% and overflow x to auto.
In months, remove flex-grow-1 (optional).

Translated, this custom style works as solution, so I propose to add a property maybe called 'fill' or 'fluid' or other name to apply this config automatically. This is useful to display a month selector in top of the page. In my case to filter reservations from january to august for example.

Maybe there is a better solution, perhaps the month grid could adapt to the size of parent and wrap the months in multiple rows if the width is not enough instead of using scrollbars, so the user don't need to scroll.

<template>
  <v-month-picker
     v-model="selectedMonths"
     hide-header
     hide-title
     :months-columns="12"
     multiple="range"
     class="month-picker-fill"
     @update:model-value="searchReservations">
  </v-month-picker>
</template>

<style>
.month-picker-fill.v-picker.v-month-picker {
    width: 100%;
    .v-month-picker__months {
        overflow-x: auto;
        width: 100%;
    }
}
</style>
Image

it still adapts to the cols system.

Image

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 by locating the VMonthPicker implementation and its existing styling and tests. Compare the proposed full-width, horizontal-overflow behavior with the alternative of wrapping month columns, then define the supported behavior and verify it at narrow and wide parent widths.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.