Vuetifyのカレンダーでイベントを表示する際に同じ時間帯に11個より多い数のイベントを表示しようとすると11個までしか表示できない

#Vuetifyでイベントを表示する際に同じ時間帯に11個以上のイベントを表示しようとすると11個までしか表示できない
画像のようにvuetifyのv-calendarで「mode」を「day」にし、同じ時間で始まり、同じ時間で終わるイベントを18個表示しようとしてみました。（18という数に意図はありません）

template内

vue
1<v-calendar
2   ref="calendar"
3   v-model="value2"
4   :weekdays="weekday2"
5   :type="type2"
6   :events="events2"
7   :event-overlap-mode="mode2"
8   :event-overlap-threshold="30"
9    @change="getEvents2"
10    :event-more="true"
11    :interval-count="24"
12></v-calendar>

script内

vue
1value2: '',
2events2: [
3    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
4    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
5    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
6    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
7    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
8    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
9    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
10    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
11    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
12    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
13    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
14    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
15    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
16    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
17    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
18    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
19    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
20    {name: '会議', start: new Date('2021-11-11T01:00:00'), end: new Date('2021-11-11T02:00:00'), color: 'grey darken-1', timed: true},
21      ],
22weekday2: [0, 1, 2, 3, 4, 5, 6],
23mode2: 'stack',
24type2: 'day',

そうしたところ、画像のように１１個のイベントしか表示できていませんでした。

ただ、開発者ツールで確認したところ、画面上には存在していて、１つの要素にかぶさっている要素が複数あるっぽいです。

##やりたいこと
⓵同じ時間スタートのイベントが11個以上あっても見えるように並べる。
⓶11個以上存在する場合「その他●●個」みたいにほかにもあることが分かるようにする。
のどちらかです。
１か月表示にすれば「その他●●個」みたいなやつはでるのですが、今回は１日表示で実現したいと思っております。

vuetifyに詳しい方、jsに詳しくて⓵か⓶を実現するやり方がわかる方がいたら教えていただけますと幸いです。
また、ほかにもこういった情報が欲しいなどの要望があればご指摘ください。
よろしくお願いします。

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

回答1件

自己解決

vuetifyの中の処理を修正することで解決しました。

node_modules/vuetify/dist/vuetify.jsのcalculateBoundsの処理を

function calculateBounds(nodes, overlapThreshold) {
  var e_4, _a;
  /////////////////////////////////////追加部分
  let nodesLength = nodes.length;
  let forNum = 0;
  try {
    for (var nodes_1 = __values(nodes), nodes_1_1 = nodes_1.next(); !nodes_1_1.done; nodes_1_1 = nodes_1.next()) {
      var node = nodes_1_1.value;
      var visual = node.visual,
          parent = node.parent;
      var columns = getMaxChildIndex(node) + 1;
      var spaceLeft = parent ? parent.visual.left : 0;
      var spaceWidth = FULL_WIDTH - spaceLeft;
      var offset = Math.min(DEFAULT_OFFSET, FULL_WIDTH / columns);
      var columnWidthMultiplier = getColumnWidthMultiplier(node, nodes);
      var columnOffset = spaceWidth / (columns - node.index + 1);
      var columnWidth = spaceWidth / (columns - node.index + (node.sibling ? 1 : 0)) * columnWidthMultiplier;
      let left;
      if (parent) {
        //削除部分
        // visual.left = node.sibling ? spaceLeft + columnOffset : spaceLeft + offset;
        /////////////////////////////////////追加部分
        visual.left = (90 / nodesLength) * (forNum)
      }
      //追加部分
      forNum++;
      visual.width = hasFullWidth(node, nodes, overlapThreshold) ? FULL_WIDTH - visual.left : Math.min(FULL_WIDTH - visual.left, columnWidth * WIDTH_MULTIPLIER);
    }
  } catch (e_4_1) {
    e_4 = {
      error: e_4_1
    };
  } finally {
    try {
      if (nodes_1_1 && !nodes_1_1.done && (_a = nodes_1.return)) _a.call(nodes_1);
    } finally {
      if (e_4) throw e_4.error;
    }
  }
}

のように変えることですべてのイベントを表示することができました。