0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vuetifyのv-calendarAPI(1日表示、1週間表示)で同じ時間帯のイベントが11個までしか表示できない問題の解決策

Last updated at Posted at 2021-11-11

#Vuetifyのv-calendarAPIの仕様?
vuetifyのv-calendarAPIを使用した際に、同じ時間帯のイベントを12個以上追加してみたときのこと。
表示されたカレンダーにはイベントが11個しか表示されていなかった。
2021-11-11_11h05_02.png
開発者ツールで確認すると、存在はしているが、ほかの要素と被っているっぽい
2021-11-11_11h19_34.png
(見にくいかもしれないが、イベントのdiv要素のstyleの中のleftが同じものが複数ある)
ここのleftを付与する処理を自分で書き換えればいいのか~と思ったので、node_modules/vuetify/dist/vuetify.jsの中の処理を確認。

leftを付与する処理を探していると、このメソッドの中で付与しているっぽい。

 function calculateBounds(nodes, overlapThreshold) {
  var e_4, _a;
  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;
      if (parent) {
        visual.left = node.sibling ? spaceLeft + columnOffset : spaceLeft + offset;
      }
      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;
    }
  }
}

色々さかのぼってこの処理に至るまでの値の受け渡しを調べたりしたが、vuetifyのデータの格納の仕方がミスってるのか12個以上同じ時間のイベントが入ってくることを想定していないのか知らないが、根本的な解決はめんどくさそうだったため、下記の処理を修正するのが1番早いと思いました。

visual.left = node.sibling ? spaceLeft + columnOffset : spaceLeft + offset;

##解決策

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;
    }
  }
}

やってるのはただの割り算なのでそんなに難しいものではありません。(割ってるのが90なのは表示するときの見た目が1番良かった気がしたからです。)

もし同じところで詰まった方がいたら、ぜひ参考にしてみて下さい~。
もっと良い書き方あったら教えてください!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?