Vuetify 2のv-calendarで月ビューの日セル高さを調整する方法

2025年8月9日

Vuetify 2のv-calendarで月ビューの日セル高さを調整する方法

Vuetify 2 の <v-calendar> を月ビューで使用していると、イベントやテキストが詰まって見づらくなることがあります。この原因は、セル自体の高さではなく、カレンダー全体の高さ設定にあります。本記事では、月ビューの日セル高さを広げる正しい方法を解説します。

Contents

なぜCSSでセルを直接大きくしても効果がないのか
正しい解決方法：v-calendar の height を指定する
注意点
まとめ

なぜCSSでセルを直接大きくしても効果がないのか

月ビューのセル高さは「カレンダー全体の高さ ÷ 週数（5〜6）」で決まります。つまり、.v-calendar-monthly__day に対して height や min-height を指定しても、親コンテナの高さを超えて広がることはできません。

正しい解決方法：v-calendar の height を指定する

セルの高さを広げたい場合は、v-calendar コンポーネント自体の height props を大きくします。


<v-calendar
  v-model="selectedDate"
  type="month"
  :height="calendarHeight"
  :min-weeks="6"
  :events="sampleEvents"
  :event-more="false"
  locale="jp-ja"
/>

<v-calendar

v-model="selectedDate"

type="month"

:height="calendarHeight"

:min-weeks="6"

:events="sampleEvents"

:event-more="false"

locale="jp-ja"

1セルあたりの高さを決めて計算する方法もあります。


<template>
  <v-calendar
    v-model="selectedDate"
    type="month"
    :height="calendarHeight"
    :min-weeks="6"
    :events="sampleEvents"
    :event-more="false"
    locale="jp-ja"
  />
</template>

<script>
export default {
  data () {
    return {
      selectedDate: '2025-01-01', // ダミー日付
      rowHeightPx: 150 // 1週あたりの高さ（px）
    }
  },
  computed: {
    calendarHeight () {
      const headerHeightPx = 56 // ヘッダ分の高さ
      const totalWeeks = 6
      return totalWeeks * this.rowHeightPx + headerHeightPx
    }
  }
}
</script>