Vue + Vuetify customize calendar component for mobile

Question

I have vuetify calendar component. This calendar (only on month type) is too big for mobile screen. Helper images: image 1 image 2

this my code:

<v-layout align-space-around
          justify-center
          row wrap
          column
          fill-height>
          <v-flex xs12>
            <v-card flat>
              <v-calendar 
                ref="calendar"
                v-model="start"
                :type="type"
                :end="end"
                :now="today"
                :value="today"
                ma-0
                locale
                @click:date="clickDate">
                  ...some calendar code here...
              </v-calendar>
            </v-card>
          </v-flex>
</v-layout>

The v-card element is rendering correctly, fits for device, but calendar takes more space (for width) that his parent (v-card).

I'll be glad for some help with that.

Answer 1

我解决了这个问题，没有任何改变。 您的问题可能是由于版本。 我现在使用的是2.3.20版。 请参考以下网址。 https://vuetifyjs.com/en/components/calendars/#click 感谢您访问我的糟糕答案。