#Vuetifyのv-calendarAPIの仕様?
vuetifyのv-calendarAPIを使用した際に、同じ時間帯のイベントを12個以上追加してみたときのこと。
表示されたカレンダーにはイベントが11個しか表示されていなかった。
開発者ツールで確認すると、存在はしているが、ほかの要素と被っているっぽい
(見にくいかもしれないが、イベントの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番良かった気がしたからです。)
もし同じところで詰まった方がいたら、ぜひ参考にしてみて下さい~。
もっと良い書き方あったら教えてください!