Vue.js （Vuetify）月カレンダー　を　１×31　で表示したい。

Vuetifyのv-calendarを使って１か月を横に長いカレンダーを表示したいです。
実現方法をご教示下さい。

![
上記のカレンダーを実現するには以下のようなコードを書きました。
これを、１×３１の横長にしたいです。

Vue
1    <v-calendar
2      ref='calendar'
3      locale='ja-jp'
4      v-model='value'
5      :day-format='(timestamp) => new Date(timestamp.date).getDate()'
6      :month-format='(timestamp) => (new Date(timestamp.date).getMonth() + 1) + " /"'
7      :events='events'
8      :event-name='eventNameFormatter'
9      @change='getEvents'
10      @click:event='showEvent'
11      @click:date='viewDay'
12    ></v-calendar>
13・・・
14  methods: {
15    getEvents () {
16      const events = [
17        {
18          name: 'windows update',
19          start: new Date('2021-08-03T01:20:50'), // 開始時刻
20          end: new Date('2021-08-03T02:40:25'), // 終了時刻
21          color: 'blue',
22          timed: true // 終日ならfalse
23        },
24        {
25          name: 'batch A',
26          start: new Date('2021-08-03T21:04:50'), // 開始時刻
27          end: new Date('2021-08-03T21:40:25'), // 終了時刻
28          color: 'orange',
29          timed: true // 終日ならfalse
30        },
31        {
32          name: 'batch B',
33          start: new Date('2021-08-03T20:03:02'), // 開始時刻
34          end: new Date('2021-08-03T23:40:25'), // 終了時刻
35          color: 'purple',
36          timed: true // 終日ならfalse
37        },
38        {
39          name: 'batch C',
40          start: new Date('2021-08-05T00:20:10'), // 開始時刻
41          end: new Date('2021-08-06T22:40:25'), // 終了時刻
42          color: 'red',
43          timed: true // 終日ならfalse
44        },
45        {
46          name: 'windows update',
47          start: new Date('2021-08-24T01:20:50'), // 開始時刻
48          end: new Date('2021-08-24T09:40:25'), // 終了時刻
49          color: 'blue',
50          timed: true // 終日ならfalse
51        },
52        {
53          name: 'batch D',
54          start: new Date('2021-08-20T10:01:30'), // 開始時刻
55          end: new Date('2021-09-01T22:40:25'), // 終了時刻
56          color: 'green',
57          timed: true // 終日ならfalse
58        }
59      ]
60      this.events = events
61    },

行動規範の内容に同意します

回答1件

ベストアンサー

完全なコードではないので、再現が難しいのです。
例えば、styleでcalendarにflexを当てて、横にするのはどうでしょうか？

<style>
.v-calendar {
  display: flex;
  flex-direction: row !important;
  overflow-x: scroll;
}
.v-calendar-weekly__week {
  min-width: 100vw;
  position: relative;
}
.v-calendar-weekly__head {
  position: absolute;
  width: 100vw;
  height: 50px;
  transform: translateY(-30px);
}
</style>

ここで試してみました↓
https://codesandbox.io/s/vue-vuetify-calendar-ze8i9?file=/src/Calendar.vue

投稿2021/08/24 06:52