Vuetify calendar height issues

Question

I'm trying to prevent two scroll bars appearing when using Vuetify's sheet and calendar.

Here is my code:

<template>
  <v-app>
    <v-main>
      <v-container fluid class="fill-height">
        <v-row justify="center" class="fill-height">
          <v-col cols="12" class="fill-height">
            <v-sheet class="fill-height">
              <v-calendar type="week" />
            </v-sheet>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

Answer 1

Just override the CSS of Vuetify Calendar Component to remove a redundant scroll-bar:

.v-calendar-daily__scroll-area {
  overflow-y: hidden !important;
}

Also remove the class="fill-height" from the v-sheet , it make a bit overlap for calendar. I don't know why you added it.

Check it out here: https://codepen.io/nmdatit/pen/OJpdwox